直接上问题
vue-cropper解决图片跨域问题
遇到这个问题主要是跨域请求,
一般情况下用js把图片转base64传输就能解决
// 设置头像base64
setAvatarBase64(src, callback) {
let _this = this;
let image = new Image();
// 处理缓存
image.src = src + '?v=' + Math.random();
// 支持跨域图片
image.crossOrigin = "Anonymous";
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
let base64 = _this.transBase64FromImage(image);
callback && callback(base64);
}
},
// 将网络图片转换成base64格式
transBase64FromImage(image) {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, image.width, image.height);
// 可选其他值 image/jpeg
return canvas.toDataURL("image/png");
}
上述代码返回的是一个base64图片字符串,直接当成img传入vue-cropper即可
七牛云解决图片跨域问题
由于本人使用的七牛云作为文件服务,七牛云不开启https不会存在跨域问题,开启了https需要做以下处理
-
第一步
打开七牛云控制台
空间管理 -> 空间设置 -> 跨域设置
-
第二步
点击域名管理,选择域名配置
总结
完成上述所有配置基本可以大部分图片跨域问题,当然有其他文件服务器按上述配置下响应头即可,还有什么其他情况遇到的问题欢迎评论补充(* ̄︶ ̄)