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

更新日期: 2017-11-20阅读量: 6182标签: 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'});  
}



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

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

原生js实现base64编码方法

base64是一种图片编码方式,用一长串超长的字符串表示图片,在加载的时候会直接以字符串的形式加载出来,减少了图片加载的http请求,正常加载服务器静态资源的时候都应该是通过http请求回来,每加载一张图片时需要发起一次http请求

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

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

Base64 编码与解码详解

Base64 是基于 64 个可打印字符 A-Z、a-z、0-9、+、/ 来表示二进制数据的表示方法,常用于数据在网络中的传输。本篇将分别介绍其编码、解码以及实际运用。

php端实现 DES+BASE64 解密

什么是Base64 格式字符串?Base64是一种基于64个可打印字符来表示二进制数据的表示方法。通常是52个大小字母和10个数字,以及+,/两个字符,还有个=用于补缺。

base64实现原理解析

Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。对于前端来说,一切可以放路径的地方,都可以使用base64来替代。

使用base64编码在页面嵌入图片

因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于地址不对或者没有将图片

图片上传转base64

做的过程中本来想用taro-ui里的那个图片上传,但是样式想自定义没搞定,结果后来就用Taro.chooseImage了。h5模式返回的是一个blob对象,然后自己转成base64了。微信小程序自己有方法。原来想用multipart的方式

base64的实现原理

base64是处理二进制数据的一种编码方式,可用于把二进制数据编码成64个可打印的字符。编码是把字符串转化成二进制数据的一种方式,计算机发展的过程中,最先定义了ASCII编码,用于表示英文字符和一些英文字符为128个字符

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

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

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!