不得不说的base64（javascript如何将图片绝对地址转化为base64）

什么是base64：

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

图片转换成base64格式的优缺点

优点

base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；
网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。
base64编码的字符串，更适合不同平台、不同语言的传输；
算法是编码, 不是压缩, 编码后只会增加字节数，但是算法简单, 几乎不会影响效率，算法可逆, 解码很方便, 不用于私密信息通信;
解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容; 缺点
base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；
网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。
base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。

javascript如何将图片绝对地址转化为base64

function getBase64Image(url) {
    const img = new Image()
    //因为是网络资源所以会有图片跨域问题产生，此属性可以解决跨域问题，下文详解
    img.setAttribute("crossOrigin", 'anonymous');
    //如果需要兼容ios，这两个顺序一定不能换，先设置crossOrigin后设置src
    img.src = url;
    return new Promise((resolve, reject) => {
        img.onload = () => {
            //canvas基本配置
            const canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            resolve({
                success: true,
                //canvas.toDataURL的方法将图片的绝对路径转换为base64编码
                base64: canvas.toDataURL()
            })
        }
        img.onerror = () => {
            reject({ success: false })
        }
    })
}

//调用
getBase64Image('https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46')
.then(res=>{
    console.log(res) // {success : true, base64 :'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4A…etGgbgs19tVBD5K/+l/8/4jpK+RseVK4AAAAASUVORK5CYII='}
})

crossOrigin属性

如果你有一个跨源图像，你可以将它复制到画布上，但这“污点”的画布，阻止你阅读它(所以你不能“偷”图像，例如从内部网站的网站本身没有访问)。但是，通过使用CORS，存储图像的服务器可以告诉浏览器允许跨源访问，因此您可以通过画布访问图像数据。
这个属性有两个值可选：
anonymous：如果使用这个值的话就会在请求中的header中的带上Origin属性，但请求不会带上cookie和其他的一些认证信息。
use-credentials：这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
如果只写个空crossOrigin=''，则和anonymous效果一样

结尾

我们项目在使用webpack打包时可以根据实际情况来选择性的将图片转换成base64，webpack需要用到的url-loader和file-loader,前者是依赖后者去做事，所以需要安装，但是不需要特殊配置那么就可以这样写

module : {
	rules : [
    	{
          //正则匹配后缀为.jpg、png、gif、jpeg格式的图片
          test: /\.(jpg|png|gif|jpeg)$/,
          //需要用到url-loader
          loader: 'url-loader',
          options: {
            //这里就是配置，在50K以下就转base64，不设置是默认全部转成base64
            limit: 50 * 1024,
            //这个配置就是如果没有转换base64会打包成图片名称是唯一的hash值，但是hash值太长，就可以设置文件名的长度，这里的10就是取hash值的前10位，ext的意思就是保留原来的后缀名
            name: '[hash:10].[ext]',
            //url-loader默认是按照es6模式，这里就是取消es6，使用commonJs模式，
            esModule : false,
          }
      	},
    ]
}