当前位置：首页 > news >正文

vue 将图片url转base64

news 2025/8/8 9:16:17

  <img :src="imgList[0]" width="600" @error="handleImageError" alt="0" @load="onloadImg" />

//当图片加载完成时，将图片url转成base64onloadImg(event) {this.urlTobase64(event.target.src, event.target.alt)},urlTobase64(url, index) {var that = thisvar 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.widthcanvas.height = img.heightvar ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0, img.width, img.height)const dataURL = canvas.toDataURL('image/jpeg') // 可根据图片后缀，动态变换如 image/pngreturn dataURL},

推荐扩展阅读
【VUE】将图片的url或file类型转换成base64，并压缩图片大小
链接: http://t.csdnimg.cn/VUD9Y

查看全文

http://www.lryc.cn/news/365157.html