js 图片转base64的方式(两种)

方式一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = “blob”]
使用FileReader 对象接收blob

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js 图片转base64方式</title>
</head>
<body><p id="container1"></p><script>getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")function getBase64(imgUrl) {window.URL = window.URL || window.webkitURL;var xhr = new XMLHttpRequest();xhr.open("get", imgUrl, true);// 至关重要xhr.responseType = "blob";xhr.onload = function () {if (this.status == 200) {//得到一个blob对象var blob = this.response;console.log("blob", blob)// 至关重要let oFileReader = new FileReader();oFileReader.onloadend = function (e) {let base64 = e.target.result;console.log("方式一》》》》》》》》》", base64)};oFileReader.readAsDataURL(blob);//====为了在页面显示图片，可以删除====var img = document.createElement("img");img.onload = function (e) {window.URL.revokeObjectURL(img.src); // 清除释放};let src = window.URL.createObjectURL(blob);img.src = srcdocument.getElementById("container1").appendChild(img);//====为了在页面显示图片，可以删除====}}xhr.send();}</script>
</body>
</html>

方式二：canvas.toDataURL()方法
实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = ‘’;
使用了Jquery库的$.Deferred()方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>js 图片转base64方式</title>
</head>
<body>
<p id="container2"></p><script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script>let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg";//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小function getBase64Image(img, width, height) {var canvas = document.createElement("canvas");canvas.width = width ? width : img.width;canvas.height = height ? height : img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, canvas.width, canvas.height);var dataURL = canvas.toDataURL();return dataURL;}function getCanvasBase64(img) {var image = new Image();//至关重要image.crossOrigin = '';image.src = img;//至关重要var deferred = $.Deferred();if (img) {image.onload = function () {deferred.resolve(getBase64Image(image));//将base64传给done上传处理document.getElementById("container2").appendChild(image);}return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']}}getCanvasBase64(imgSrc).then(function (base64) {console.log("方式二》》》》》》》》》",base64);}, function (err) {console.log(err);});</script>
</body>
</html>

js 图片转base64的方式(两种)相关推荐

js 图片转base64的方式
这篇文章主要介绍了js 图片转base64的方式,现在分享给大家,也给大家做个参考. 方式一:Blob和FileReader 对象实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[ ...
原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
python怎么下载图片怎么保存到本地_详解Python下载图片并保存本地的两种方式
一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url ...
php如何防止图片盗用/盗链的两种方法(转)
图片防盗链有什么用? 防止其它网站盗用你的图片,浪费你宝贵的流量.本文章向大家介绍php防止图片盗用/盗链的两种方法 Apache图片重定向方法设置images目录不充许http访问 Apache服 ...
html+input改变图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 将小图标当做input的背景来插入,直接上代码吧: Box{ height: 50px; backgroun ...
node.js 图片转base64编码
node.js 图片转base64编码说明:这里用的是调用接口上传一个图片转为base64编码,不想写接口也可以直接读取本地图:基于node.js,使用koa框架开发的接口. 1.接口代码: //k ...
js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
JS实现千位分隔符的两种方法
分享JS实现千位分隔符的两种方法自己最好在 VScode 进行练习,看不如动手来得深刻方法一:普通方法 <script>function numFormat(num) {var tmp ...
html密码框怎么添加小图标,JS Input里添加小图标的两种方法
我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一将小图标当做input的背景来插入,直接上代码吧: *{ margin: 0; padding: 0 ...

js 图片转base64的方式(两种)

js 图片转base64的方式(两种)相关推荐

最新文章

热门文章