img图片转dataURL格式

将图片转化成dataurl格式之前，要明白为什么这么做？

前端项目的assets一般会放置大量的图标，比如，svg，png，webp的，他们伴随着项目的解析，打包，被编译呈现在web应用上，这个过程其实每个图片都会发起一次网络请求。

那么这些小图标其实没必要请求，那么将他们转为dataurl格式，嵌入到html文件中。

什么是dataurl？

dataURL是一种基于url的表示数据的方式，可以用来表示文本，图片等多种数据类型，它使用base64将资源转为字符格式，其转后的格式为data:xxxxxxx...........

例如：

data:image/png;base64,iVBORw0KGg...

在你的utils里新增一个imgToDataurl.js

export cosnt imgToDataURL=(src)=>{

    return new Pomise((resolve,reject)=>{
        cosnt img = new Imgae()
           //如果图片设置需要跨域
        img.setAttribute("crossOrigin","anonymous")
        img.onload=()=>{

            try{
                let canvas = document.createElement('canvas')
                canvas.width = img.width;
                canvas.height = img.height
                let ctx = canvas.getContext('2d')
                //图片绘制到canvas
                ctx.drawImage(img,0,0,img.width,img.height)
                resolve(canvas.toDataURL())
            }catch{
                reject(e)
            }
        }
        img.onerror=(e)=>{
            rejet(e)
        }
        img.src = src

    })
}

然后就可以在img赋值的时候，把这个方法引入进来，将img的地址传给这个函数

<img :src="imgToDataUrl(item.img)" />

 一般在项目中是很实用的小技巧。