阅读 1683

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

什么是base64:

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

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

优点

  1. base64格式的图片是文本格式,占用内存小,转换后的大小比例大概为1/3,降低了资源服务器的消耗;
  2. 网页中使用base64格式的图片时,不用再请求服务器调用图片资源,减少了服务器访问次数。
  3. base64编码的字符串,更适合不同平台、不同语言的传输;
  4. 算法是编码, 不是压缩, 编码后只会增加字节数,但是算法简单, 几乎不会影响效率,算法可逆, 解码很方便, 不用于私密信息通信;
  5. 解码方便, 但毕竟编码了, 肉眼还是不能直接看出原始内容;

缺点

  1. base64格式的文本内容较多,存储在数据库中增大了数据库服务器的压力;
  2. 网页加载图片虽然不用访问服务器了,但因为base64格式的内容太多,所以加载网页的速度会降低,可能会影响用户的体验。
  3. 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-loaderfile-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,
          }
      	},
    ]
}
复制代码
文章分类
前端
文章标签