图片裁剪工具vueCropper跨域解决

1.报错原因：本项目的图片放在亚马逊，需求是直接拿到网络图片进行裁剪

2.解决：将图片转化成base64

Vue.prototype.getBase64Img = function(params) {if (params && params.url) {var that = this;var image = new Image();    image.src = params.url + "?" + Math.random();image.crossOrigin = 'anonymous';image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var ctx = canvas.getContext("2d");ctx.drawImage(image, 0, 0, image.width, image.height);var ext = image.src.substring(image.src.lastIndexOf(".") + 1).toLowerCase();var dataURL = canvas.toDataURL("image/" + ext);if (params.callback) {if (params.data) {that[params.callback](dataURL, params.data);} else {that[params.callback](dataURL);}};return dataURL;}}};

用此方法转化后的url裁剪完美的解决了跨域问题，其他地方需要转base64直接复制此方法可直接使用

图片裁剪工具vueCropper跨域解决相关推荐

js图片下载(支持跨域/解决Access-Control-Allow-Origin)
一.思路使用canvas绘制图片使用toBlob方法将canvas图片转换为文件使用a标签的download属性下载这个canvas转化生成的图片文件 canvas.toBlob() 将canv ...
node解决关于请求必应图片API的跨域问题
关于请求必应图片API的跨域问题必应每天都会更新一张背景图片,如果我们想要在自己的网站中每天动态得更新这种图标就需要用到API去请求,必应官方API 请求实例: https://cn.bing.co ...
图片转base64跨域问题
vue图片转base64跨域问题,亚马逊存储 1.问题说明:如果资源存在是放在国内(如七牛)在转base64的时候不会发生跨域,但本项目存储空间选择的是亚马逊S3,在转化的时候出现了跨域 2.解决 2 ...
解决ajax请求跨域,解决ajax请求跨域
跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法方法一 // ajax请求跨域 /* *解决a ...
jquery、javascript实现(get、post两种方式)跨域解决方法
jquery.javascript实现(get.post两种方式)跨域解决方法一.实现get方式跨域请求数据浏览器端 <script> $(document).ready(fun ...
JavaScript跨域解决方法大全
跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过"URL的首部"字符串进行识别,"URL的首部"指window.lo ...
Nginx跨域解决配置示例
简介在日常学习和工作开发中,需要请求两个不同配置的请求经常存在,本文介绍如果还使用Nginx配置解决其跨域问题相关理论首先需要了解什么是跨域,下面的两个文章说的很好,请仔细阅读后,然后自己去动手 ...
React项目中请求跨域解决方法
React项目中请求跨域解决方法今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
Nginx的简单使用，配置多前端，多端口【微信小程序+前后端分离跨域解决】
微信小程序微信小程序需要服务器要有域名,不能有端口,但是我还有一个WebSocket的wss协议路径需要填,都是后台的示例配置文件,配置https转发http,配置https转发wss user ...

图片裁剪工具vueCropper跨域解决

图片裁剪工具vueCropper跨域解决

图片裁剪工具vueCropper跨域解决相关推荐

最新文章

热门文章