<强>方式一:Blob和FileReader对象
实现原理:
使用xhr请求图片,并设置返回的文件类型为Blob对象(xhr。responseType=癰lob”]
使用FileReader对象接收blob
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> js图片转base64方式& lt;/title>
& lt;/head>
& lt; body>
& lt; p id=" container1 "祝辞& lt;/p>
& lt; script>
getBase64 (“https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg”)
函数getBase64 (imgUrl) {
窗口。URL=窗口。URL | | window.webkitURL;
var xhr=new XMLHttpRequest ();
xhr。打开(“获得”,imgUrl,真);//至关重要
xhr。responseType=癰lob”;
xhr。onload=function () {
如果这一点。状态==200){//得到一个blob对象
var blob=this.response;
控制台。日志(“blob”、blob)//至关重要
让oFileReader=new FileReader ();
oFileReader。onloadend=function (e) {
让base64=e.target.result;
控制台。日志(“方式一》》》》》》》》》”,base64)
}；
oFileReader.readAsDataURL (blob);//====为了在页面显示图片,可以删除====var img=document.createElement (img);
img。onload=function (e) {
window.URL.revokeObjectURL (img.src);//清除释放
}；
让src=https://www.yisu.com/zixun/window.URL.createObjectURL (blob);
img。src=src
. getelementbyid (container1) .appendChild (img);//====为了在页面显示图片,可以删除====}
}
xhr.send ();
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
<强>方式二:canvas.toDataURL()方法
实现原理:
使用canvas.toDataURL()方法
需要解决图片跨域问题的形象。crossOrigin=";
使用了Jquery库的美元.Deferred()方法
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> js图片转base64方式& lt;/title>
& lt;/head>
& lt; body>
& lt; p id=" container2 "祝辞& lt;/p>
& lt;脚本src=" https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js "祝辞& lt;/script>
& lt; script>
让imgSrc=" https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg ";//宽度、高度调用时传入具体像素值,控制大小,不传则默认图像大小
函数getBase64Image (img、宽度、高度){
画布var=document.createElement(“画布”);
画布。宽度=宽度& # 63;宽度:img.width;
画布。身高=身高& # 63;高度:img.height;
var ctx=canvas.getContext (2 d);
ctx。drawImage (img, 0, 0,画布。宽度,canvas.height);
var dataURL=canvas.toDataURL ();
返回dataURL;
}
函数getCanvasBase64 (img) {
var=新形象形象();//至关重要
的形象。crossOrigin=";
的形象。src=https://www.yisu.com/zixun/img;//至关重要
var延迟=$ .Deferred ();
如果(img) {
的形象。onload=function () {
deferred.resolve (getBase64Image(图像));//将base64传给做上传处理
. getelementbyid (container2) .appendChild(图片);
}
返回deferred.promise();//问题要让onload完成后再返回sessionStorage (“imgTest”)
}
}
getCanvasBase64 (imgSrc)
不要犹豫(函数(base64) {
console.log(“方式二》》》》》》》》》”,base64);
}、功能(err) {
console.log(错);
}）;
& lt;/script>
& lt;/body>
& lt;/html>
<强>演示展示
图片Base64
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
