img转base64的多方面详解

三、如何使用JavaScript实现img转base64

1、使用XMLHttpRequest对象获取图片文件并将其转换成base64编码。

    function imgToBase64(url, callback){
         var xhr = new XMLHttpRequest();
         xhr.onload = function() {
             var reader = new FileReader();
             reader.onloadend = function() {
                 callback(reader.result);
             }
             reader.readAsDataURL(xhr.response);
         };
         xhr.open('GET', url);
         xhr.responseType = 'blob';
         xhr.send();
     }
     imgToBase64('img/test.png', function(dataURL){
         console.log(dataURL);
     });

2、使用canvas元素将图片绘制并将其转换成base64编码。

    function imgToBase64(url, callback){
         var canvas = document.createElement('canvas');
         var ctx = canvas.getContext('2d');
         var img = new Image();
         img.crossOrigin = 'anonymous';
         img.onload = function() {
             canvas.width = this.width;
             canvas.height = this.height;
             ctx.drawImage(this, 0, 0);
             callback(canvas.toDataURL());
         };
         img.src = url;
     }
     imgToBase64('img/test.png', function(dataURL){
         console.log(dataURL);
     });

四、img转base64的优缺点

优点：

1、减少HTTP请求，提升页面加载速度。

2、能够将图片直接存储在HTML、CSS或JavaScript文件中，便于代码维护。

3、能够在不支持图片格式的浏览器中正常显示图片。

缺点：

1、base64编码会将原始图片的大小增加1/3，导致数据传输量增加。

2、base64编码的图片一旦被修改，就需要重新上传整个文件。

3、base64编码的图片对于较大的图片不利于缓存和页面性能。

五、结语

img转base64是一种优化前端工作的方法，适用于一些小尺寸的图片，能够提升页面的加载速度和用户体验。但是对于一些较大的图片，仍然应该使用标签并优化图片本身，以减少HTTP请求。