使用若依的小伙伴都知道,若依的头像上传默认是创建文件夹保存图片,但我们在实际开发中常常需要把图片保存在oss上,当我们修改头像后,再次修改头像就会出现跨域问题,裁剪区域无法显示图片,下面我将分享一下我的解决办法:
1.出现跨域,是使用了vue-cropper组件
2.配置oss存放图片的bucket跨域规则,可设*,视为不作限制
3.将图片转为base64格式展现
// 设置头像base64
setAvatarBase64(src, callback) {
let _this = this;
let image = new Image();
// 处理缓存
image.src = src + '?v=' + Math.random();
// 支持跨域图片
image.crossOrigin = "*";
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");
}
这样就可以正常显示啦,当然眼尖小伙伴会注意到 _this = this 这一步,或许有的小伙伴会疑惑,为什么不直接使用this?其实this的指向是会改变,当在image.onload = function (){}里面this便指向了image,于是我们提前把this赋给_this指向Vue实例,才能调用transBase64FromImage方法。
推荐参考: