在使用vue-cropper时,展示图片的时候出现跨域
报错如下:
vue-cropper空白
解决方法:
将网络图片转为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/jpeg')
},
// 设置需要展示的图片 base64
setAvatarBase64(src, callback) {
let _this = this
let image = new Image()
// 处理缓存
image.src = src + '?v=' + Math.random()
// 支持跨域图片