<img :src="imgList[0]" width="600" @error="handleImageError" alt="0" @load="onloadImg" />
//当图片加载完成时,将图片url转成base64
onloadImg(event) {
this.urlTobase64(event.target.src, event.target.alt)
},
urlTobase64(url, index) {
var that = this
var img = new Image()
img.src = url + '?time=' + new Date().valueOf() // 加上时间结尾,处理缓存
//支持http跨域图片。需要后端设置图片支持跨域为*(如果后端不处理,加上这行会无法显示图片,导致拿不到base64)
img.setAttribute('crossOrigin', '*')
if (url) {
img.onload = function () {
var base64Url = that.getBase64Image(img)
// console.log(base64Url) // 最终拿到的base64值
that.img64[index] = base64Url // 保存数据
}
}
},
getBase64Image(img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀,动态变换如 image/png
return dataURL
},
推荐扩展阅读
【VUE】将图片的url或file类型转换成base64,并压缩图片大小
链接: http://t.csdnimg.cn/VUD9Y