这篇文章主要讲解通过原生js，将图片地址转换为base64格式后显示的方法，以及base64的图片数据如何转换为file文件并提交。图片通过base64的形式直接在html中显示，它最主要的好处是可减少http请求，同时浏览器不会缓存该图片。

图片转换base64

html:

<img src="" id="demo" />

js:

function toBase64(url, callback, outputFormat){//图片地址，回调，输出格式
    var canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
    img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
	    canvas.height = img.height;
	    canvas.width = img.width;
	    ctx.drawImage(img,0,0);
	    var dataURL = canvas.toDataURL(outputFormat || 'image/png');
	    callback.call(this, dataURL);
	    canvas = null; 
	};
	img.src = url;
}
toBase64('https://imgsa.baidu.com/exp/pic/item/09bb4f3d269759eeed4e116fb3fb43166d22df3d.jpg', function(base64Img){
  document.getElementById('demo').setAttribute('src',base64Img)
});

js将base64转换为file并提交

 function sumitImageFile(base64Codes){  
    var form=document.forms[0];  
    var formData = new FormData(form);   //这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数  
    //convertBase64UrlToBlob函数是将base64编码转换为Blob  
    formData.append("imageName",convertBase64UrlToBlob(base64Codes));  //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同  
    //ajax 提交form  
    $.ajax({  
        url : form.action,  
        type : "POST",  
        data : formData,  
        dataType:"text",  
        processData : false,         // 告诉jquery不要去处理发送的数据  
        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头  
        success:function(data){  
            window.location.href="${ctx}"+data;  
        },  
        xhr:function(){ //在jquery函数中直接使用ajax的XMLHttpRequest对象  
            var xhr = new XMLHttpRequest();  
              
            xhr.upload.addEventListener("progress", function(evt){  
                if (evt.lengthComputable) {  
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);    
                    console.log("正在提交."+percentComplete.toString() + '%');        //在控制台打印上传进度  
                }  
            }, false);    
            return xhr;  
        }   
    });  
}  
  
//将以base64的图片url数据转换为Blob，用url方式表示的base64图片数据  
function convertBase64UrlToBlob(urlData){  
    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  
    //处理异常,将ascii码小于0的转换为大于0  
    var ab = new ArrayBuffer(bytes.length);  
    var ia = new Uint8Array(ab);  
    for (var i = 0; i < bytes.length; i++) {  
        ia[i] = bytes.charCodeAt(i);  
    }  
    return new Blob( [ab] , {type : 'image/png'});  
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/134