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

时间: 2017-11-20阅读: 3011标签: base64

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



利用PHP将图片转换成base64编码的实现方法

base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一。base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输。由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下

原生 JS 的 Base64 转码

JavaScript 原生提供两个 Base64 相关的方法:btoa():任意值转为 Base64 编码,atob():Base64 编码转为原来的值。注意:这两个方法不适合非 ASCII 码的字符,会报错。

图片保存到本地_原生js实现base64图片下载

在项目开发过程中,经常会有图片导出的需求,原生js实现base64图片下载实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法。

js原生Base64转码和解码函数btoa和atob的使用

javascript原生的api是支持,Base64的, window.btoa方法将普通字符串转为Base64字符串,window.atob将Base64字符串转为普通字符串,它们在现代浏览器中受到广泛的支持。

js实现字符串/base64的编码和解码

JavaScript对字符串/base64的编码和解码;Base64其实是一种简单的置换加密方式,但是BASE64的用处往往并不是为了防止信息泄露,而且为了方便传输,进过BASE64编码后的信息会比原始信息长,大概是4/3倍。

内容以共享、参考为目的,请勿用于商业用途。其版权归原作者所有,如有侵权,请与小编联系,情况属实将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全