JavaScript – Convert Image to Base64 String
From: https://bytenota.com/javascript-convert-image-to-base64-string/
his post shows you two approaches how to convert an image to a Base64 string using JavaScript: HTML5 Canvas
and FileReader
.
1. Approach 1: HTML5 Canvas
function toDataURL(src, callback) {
var image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
context.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
callback(dataURL);
};
image.src = src;
}
The above code we load the image into Image
object, draw it to the canvas and then convert it to Base64 image data URL.
2. Approach 2: FileReader
function toDataURL(src, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onload = function() {
var fileReader = new FileReader();
fileReader.onloadend = function() {
callback(fileReader.result);
}
fileReader.readAsDataURL(xhttp.response);
};
xhttp.responseType = 'blob';
xhttp.open('GET', src, true);
xhttp.send();
}
The above code we load the image as Blob via XMLHttpRequest
, then use FileReader
to convert the image to Base64 image data URL.
Use the function:
toDataURL('https://www.gravatar.com/avatar', function(dataURL) {
// do something with dataURL
console.log(dataURL);
});
但是这两种都是需要图片服务器允许跨域资源访问才可以,对于第二种方法,如果图片服务器不允许跨域资源访问, XMLHttpRequest的onload事件就不会执行.
注: 在实际的应用中,发现Canvas转换gif动图的时候只能取到第一帧,结果动图变成了静图,而FileReader方法则可以成功转换动图.下面两段代码分别用来出来本地文件和网络文件:
本地文件:
<!DOCTYPE html>
<html>
<head>
<title>Blob To Base64</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<img id="showImg" />
<input type="file" onchange="changeFile(event);" />
</body>
</html>
<script type="text/javascript">
function changeFile(event) {
file = event.target.files[0];
var a = new FileReader();
a.onload = function (e) {
var base64Str = e.target.result;//获取base64
//下面是测试得到的base64串能否正常使用:
document.getElementById('showImg').src = base64Str;
}
a.readAsDataURL(file);
}
</script>
网络文件:
<!DOCTYPE html>
<html>
<head>
<title>Blob To Base64</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>
<img id="showImg" />
<input type="button" value="Test" onclick="TestBase64();" />
</body>
</html>
<script type="text/javascript"> function TestBase64()
{
var fileUrl = "http://29e5534ea20a8.cdn.sohucs.com/c_zoom,h_86/c_cut,x_8,y_0,w_225,h_150/os/news/e4337401e7ebeac6f7cdb52fac9807e5.gif"
toDataURL(fileUrl, function(base64)
{
document.getElementById('showImg').src = base64;
});
} function toDataURL(src, callback) {
var xhttp = new XMLHttpRequest(); xhttp.onload = function() {
var fileReader = new FileReader();
fileReader.onloadend = function() {
callback(fileReader.result);
}
fileReader.readAsDataURL(xhttp.response);
}; xhttp.responseType = 'blob';
xhttp.open('GET', src, true);
xhttp.send();
} </script>
另外找动图可以到这里面来找: https://tieba.baidu.com/p/4674320064
JavaScript – Convert Image to Base64 String的更多相关文章
- csharp:Convert Image to Base64 String and Base64 String to Image
/// <summary> /// 图像转成二进制数组 /// </summary> /// <param name="imageIn">< ...
- convert image to base64
ylbtech-Unitity-cs:convert image to base64 convert image to base64 1.A,效果图返回顶部 1.B,源代码返回顶部 1.B.1,c ...
- how to convert a number to a number array in javascript without convert number to a string
how to convert a number to a number array in javascript without convert number to a string 如何在不将数字转换 ...
- convert image to base64 in javascript
convert image to base64 in javascript "use strict"; /** * * @author xgqfrms * @license MIT ...
- PIL.Image与Base64 String的互相转换
https://www.jianshu.com/p/2ff8e6f98257 PIL.Image与Base64 String的互相转换 mona_alwyn 2018.01.18 19:02* 字数 ...
- How to convert any valid date string to a DateTime.
DateTimeFormatInfo pattern = new DateTimeFormatInfo() { ShortDatePattern = "your date pattern&q ...
- javaScript 工作必知(三) String .的方法从何而来?
String 我们知道javascript 包括:number,string,boolean,null,undefined 基本类型和Object 类型. 在我的认知中,方法属性应该是对象才可以具有的 ...
- 异常-----Can't convert the date to string, because it is not known which parts of the date variable are in use. Use ?date, ?time or ?datetime built-in, or ?string.\u003Cformat> or ?string(format) built-
1.错误描述 五月 27, 2014 12:07:05 上午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...
- Convert CString to ANSI string in UNICODE projects
Convert CString to ANSI string in UNICODE projects Quick Answer: use an intermediate CStringA. Norma ...
随机推荐
- 性能测试二十七:环境部署之Dubbo原理
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成. Dubbo是框架,并不是像http那种传输协议 传统 ...
- thinkphp3.2自定义success及error跳转页面
首先我们需要配置目录 在conf下新建一个config文件 <?php return array( 'TMPL_ACTION_SUCCESS'=>'Public:dispatch_jump ...
- BZOJ4997 [Usaco2017 Feb]Why Did the Cow Cross the Road III
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ4997 题意概括 在n*n的区域里,每一个1*1的块都是一个格子. 有k头牛在里面. 有r个篱笆把格 ...
- C++ 的static 与 const
1.static成员变量(非const)必须在类外定义,在类中只是作为声明(声明其scope为该类),不能使用类初始化成员列表来初始化,只能在定义的时候初始化. 2.static const的成员变量 ...
- Ubuntu 下常用快捷键
参考链接:Ubuntu终端以及应用下快捷键大全https://linux.cn/article-3025-1.html 桌面常用快捷键 Alt + F1:聚焦到桌面左侧任务导航栏,可按上下键进行导航 ...
- laravel 控制器使用MODEL
第一步:引入MODEL类 use App\Http\Models\Sysdba; 第二步:使用 $uid = $request->input('uid'); 方法1. $model = new ...
- centos关机、重启、图形界面与命令行界面切换命令
1.关机: init0; poweroff; halt; shutdown 2.重启: init1; reboot; 3.图形界面切换到命令行界面: init3; 或者,修改配置文件: #vi ...
- 解决winscp中普通用户无法上传、删除、移动文件
上一篇博客中提到了winscp这个软件,这个软件可以利用sftp协议对linux服务器就行连接,然后方便我们对文件进行操作,但是如果是利用普通用户进行登陆的话,在对文件进行相关操作的时候会出现一些pe ...
- npm和yarn
在2016年10月11日facebook公开了新的javascript包管理工具yarn,用来替代目前被广泛使用的npm(nodejs 自带的包管理工具)
- php页面静态化,ob缓存方法
<?php ob_start();//开启缓存 //要生成静态网页的内容开始 ?> 中间的html代码 <?php //要生成静态网页的内容结束 //把生成的静态内容保存到文件,而不 ...