img转base64的多方面详解

一、什么是img转base64

img转base64是指将图片文件转换成base64编码格式的字符串的过程。base64编码是一种用64个字符表示二进制数据的方法，它可以将二进制数据以可读形式显示出来，通常用于在网络上传输数据。

在前端开发中，img转base64能够将图片数据直接存储在HTML、CSS或JavaScript文件中，而不需要使用标签的src属性引用外部图片文件，这样能够提升页面加载速度，并且减少HTTP请求。

二、img转base64的使用场景

1、用于替代图片文件，减少HTTP请求。

   background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgA...)

2、用于网站图标、Logo等小图片的使用。

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+PhfDwAD...

3、用于实现CSS3的image()函数。

    @supports (background: image( url("test.png") ) ){
       .box {background: -webkit-image( url("test.png") );}
    }

4、用于显示用户上传的图片预览。

    function handleFileSelect(evt) {
         var files = evt.target.files; // FileList object
         var file = files[0];
         var reader = new FileReader();
         reader.onloadend = function() {
             document.getElementById('preview').src = reader.result;
         }
         reader.readAsDataURL(file);
     }
     <input type="file" onchange="handleFileSelect(event)">
     <img id="preview">

三、如何使用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请求。