vue 图片转Base64
1.图片地址转Base64 有回调
getBase64(url, callback) { let Img = new Image(), dataURL = ''; let imgExt = this.extname(url); Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错; Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题（没用就跟后台沟通添加跨域） Img.onload = function () { //要先确保图片完整获取到，这是个异步事件 let canvas = document.createElement("canvas"), //创建canvas元素 width = Img.width, //确保canvas的尺寸和图片一样 height = Img.height; canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中 dataURL = canvas.toDataURL('image/'+imgExt); //转换图片为dataURL callback ? callback(dataURL) : null; //调用回调函数 }; }, 调用 this.getBase64(res.data.data.url, (dataURL) => { console.log(dataURL) //返回的Base64 }) 1.1图片地址转Base64 无回调 getBase64(url) { var that = this let Img = new Image(), dataURL = ''; let imgExt = this.extname(url); Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错; Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题（没用就跟后台沟通添加跨域） Img.onload = function () { //要先确保图片完整获取到，这是个异步事件 let canvas = document.createElement("canvas"), //创建canvas元素 width = Img.width, //确保canvas的尺寸和图片一样 height = Img.height; canvas.width = width; canvas.height = height; canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中 dataURL = canvas.toDataURL('image/'+imgExt); //转换图片为dataURL that.changeUrl(dataURL) //需要调用Base64的函数 }; },