前端实现图片转Base64

废话不多说，直接上代码

base64 (url) {return new Promise((resolve) => {const image = new Image()// 先设置图片跨域属性image.crossOrigin = 'Anonymous'// 再给image赋值src属性，先后顺序不能颠倒image.src = urlimage.onload = function () {const canvas = document.createElement('CANVAS')// 设置canvas宽高等于图片实际宽高canvas.width = image.widthcanvas.height = image.heightcanvas.getContext('2d').drawImage(image, 0, 0)// toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）const dataURL = canvas.toDataURL('image/jpeg')resolve(dataURL)}image.onerror = () => {resolve({ message: '相片处理失败' })}})},

我们传入一个图

async mounted () {// this.init()const url = await this.base64('https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg')console.log(url)},

片地址看看是否成功

但是，一般我们在做这样的需求前，处理的图片肯定不止一张，接下来就要批量处理，但是这个方法是异步，我们要将一个数组内的每个对象的地址都转成base64,才算真正完成我们的功能。前端一般接收到后端的数据一般是这种格式。

但是我们正常使用map函数遍历去将图片地址转成base64，上代码：

 const newImgOBj = await Promise.all(this.imgOBj.map(async (item) => {return {name: item.name,img: await this.base64(item.img)}}))console.log(newImgOBj)

打印一下看结果发现我们的图片地址已经变成了base64编码。

最后我们将图片使用img标签正常渲染就好了，小知识：浏览器在识别同一个一模一样的图片地址，浏览器只会请求一遍该图片资源哦。