javascript图片转换base64,以及如何将base64的数据转换成图片

时间: 2017-11-20阅读: 647标签: 图片

这篇文章主要讲解通过原生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'});  
}




css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

网站图片优化的重要性与技巧方案

网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

网站图片img懒加载和预加载

懒加载也就是延迟加载,好处是页面加载速度快、可以减轻服务器的压力、节约了流量,用户体验好。预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染