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 = src
document.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>
demo展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
您可能感兴趣的文章:
- Javascript将图片的绝对路径转换为base64编码的方法
- js实现把图片的绝对路径转为base64字符串、blob对象再上传
- HTML5 JS压缩图片并获取图片BASE64编码上传
- JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
- js 将图片连接转换成base64格式的简单实例
- js 显示base64编码的二进制流网页图片
- js对图片base64编码字符串进行解码并输出图像示例
相关推荐
-
js实现把图片的绝对路径转为base64字符串、blob对象再上传
主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: 使用canvas.toDataURL()方法将图片的绝对路径转换为base64编码. 具体用法: 在这我们引用淘宝服务器上的一张图片举例: var imgSrc = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.j
-
js对图片base64编码字符串进行解码并输出图像示例
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
js 显示base64编码的二进制流网页图片
Data URI scheme. Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入.比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张2*2的白色gif图片. 在上面的Data URI中,data表示取得数据的协定名称,image/gif是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/gif文件base64编码后的数据. 目前,Data URI sc
-
js 将图片连接转换成base64格式的简单实例
我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Ano
-
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成
-
HTML5 JS压缩图片并获取图片BASE64编码上传
本文实例为大家分享了HTML5 JS压缩图片,并获取图片BASE64编码上传的方法,供大家参考,具体内容如下 基本过程 1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象. 2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上. 3) 通过 c
-
Javascript将图片的绝对路径转换为base64编码的方法
我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: 复制代码 代码如下: var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; 我们如下编写代码: function getBase64Image(img) { var canvas = document.createElement("canva
-
js 图片转base64的方式(两种)
方式一:Blob和FileReader 对象 实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo
-
原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参考,具体内容如下 方法一:利用iframe框架上传图片 html代码如下: <div class="frm"> <form name="uploadFrom" id="uploadFrom" action="upload.
-
android实现图片闪烁动画效果的两种实现方式(实用性高)
大家在使用APP的时候,有的APP在点击语音搜索界面后,会出现一个小话筒,小话筒会类似雷达似得在闪烁,表示正在倾听你说话的内容(这个大家可以参照微软的必应APP),那么问题来了,这种动画效果是如何实现的呢?其实实现这种动画效果有很多种方法,最常见的是两种:第一种就是插入n张图片进行切换已达到如此目的,第二种就是通过改变一张图片的透明度来达到闪烁的效果.下面就分别讲一下通过这两种方法如何实现. 第一种:通过n张图片之间切换实现动画效果 这种方法的原理很简单,利用handler的延时机制在子线程中完
-
详解Python下载图片并保存本地的两种方式
一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516371301&di=d99af0828bb301fea27c2149a7070" \ "d44&am
-
Jmeter实现Base64编码的两种方式
Jmeter实现Base64编码有两种方式: 1.如果安装的Jmeter版本内置提供了Base64加密函数,可以直接使用该内置函数,方法如下: 点击Tools --> 函数助手对话框 找到内置的Base64加密函数,选中__base64Encode 2.如果安装的Jmeter版本无内置Base64加密函数,那么遇到需要Base64加密的需求,只能通过BeanShell脚本实现,方法如下: import org.apache.commons.net.util.Base64; String sour
-
JS实现Tab栏切换的两种方式案例详解
面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
-
基于jQuery实现图片推拉门动画效果的两种方法
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li></li> --> <li&g
-
JS类定义原型方法的两种实现的区别评论很多
我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗? JScript Class: 复制代码 代码如下: function JSClass() { } Extends prototype method: 复制代码 代码如下: JSClass.prototype.MethodA = function() { }; Or 复制代码 代码如下: function = JSCla
-
Android实现图片轮播效果的两种方法
大家在使用APP的过程中,经常会看到上部banner图片轮播的效果,那么今天我们就一起来学习一下,android中图片轮询的几种实现方法: 第一种:使用动画的方法实现:(代码繁琐) 这种发放需要:两个动画效果,一个布局,一个主类来实现,不多说了,来看代码吧: public class IamgeTrActivity extends Activity { /** Called when the activity is first created. */ public ImageView image
-
JS小球抛物线轨迹运动的两种实现方法详解
本文实例讲述了JS小球抛物线轨迹运动的两种实现方法.分享给大家供大家参考,具体如下: js实现小球抛物轨迹运动的大致思路: 1.用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果 2.绘制小球和运动区域,运动区域可通过flex布局实现垂直居中 3.用物理公式S(y)=1/2*g*t*t,S(x)=V(x)t来计算路径 现确定V(x)=4m/s,刷新的时间间隔设置为0.1s.原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm.但浏览器