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

example.js
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

example.js
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的更多相关文章

  1. csharp:Convert Image to Base64 String and Base64 String to Image

    /// <summary> /// 图像转成二进制数组 /// </summary> /// <param name="imageIn">< ...

  2. convert image to base64

    ylbtech-Unitity-cs:convert image to base64 convert image to base64 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1,c ...

  3. 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 如何在不将数字转换 ...

  4. convert image to base64 in javascript

    convert image to base64 in javascript "use strict"; /** * * @author xgqfrms * @license MIT ...

  5. PIL.Image与Base64 String的互相转换

    https://www.jianshu.com/p/2ff8e6f98257 PIL.Image与Base64 String的互相转换 mona_alwyn 2018.01.18 19:02* 字数 ...

  6. How to convert any valid date string to a DateTime.

    DateTimeFormatInfo pattern = new DateTimeFormatInfo() { ShortDatePattern = "your date pattern&q ...

  7. javaScript 工作必知(三) String .的方法从何而来？

    String 我们知道javascript 包括:number,string,boolean,null,undefined 基本类型和Object 类型. 在我的认知中,方法属性应该是对象才可以具有的 ...

  8. 异常-----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 ...

  9. Convert CString to ANSI string in UNICODE projects

    Convert CString to ANSI string in UNICODE projects Quick Answer: use an intermediate CStringA. Norma ...

随机推荐

  1. poj3349 散列表（hash）

    就是散列表的应用,把每片哈希值相同的雪花排到一条链上去即可,每片雪花x的哈希值 hash(x)=sum(x的六角)+mul(x的六角),会爆int #include<iostream> # ...

  2. python3 + selenium 之窗口切换

    窗口切换 此代码来源学习后对淘宝操作实践记录: 以下代码在Chrome61和IE11上正常运行,Firefox5.7上运行存在一些问题须改进,应该是火狐不兼容差link_text部分和循环经常报错,在 ...

  3. 【APUE | 08】进程控制

    函数fork 博文链接: 1. 代码示例: #include "apue.h" ; char buf[] = "a write to stdout\n"; in ...

  4. .NetCore下使用Prometheus实现系统监控和警报 （六）进阶Grafana集成自定义收集指标

    Prometheus中包含了很多收集指标,那么我们怎来在Grafana中来使用呢? 接下来我们还是以之前自定义的来演示如图:我们在Prometheus中已经可以看到这个之前我们自定义的类型了 关于Gr ...

  5. django的FormView中，自定义初始化表单数据的曲折方法

    这个技巧,主要是用于表单初始化及回显. 也就是说,如果用户的数据库里有数据,则要将相应的数据显示在表单里, 如果用户的数据库里没有数据,才会生成一个空白的表单给用户, 这样才显得专业塞! 而我面对的尴 ...

  6. POJ 2229 Sumsets【DP】

    题意:把n拆分为2的幂相加的形式,问有多少种拆分方法. 分析:dp,任何dp一定要注意各个状态来源不能有重复情况.根据奇偶分两种情况,如果n是奇数则与n-1的情况相同.如果n是偶数则还可以分为两种情况 ...

  7. CSS3滚动条美化,CSS3滚动条皮肤

    CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这 ...

  8. PyCharm 和 IntelliJ IDEA的破解激活

    本教程对jetbrains全系列可用,例如:IDEA.WebStorm.phpstorm.clion等 PyCharm激活: 方法一: server选项里边输入  http://elporfirio. ...

  9. windows下redis安装和配置

    windows下redis安装和配置 redis介绍 Redis是一个开源,高级的键值存储和一个适用的解决方案,用于构建高性能,可扩展的Web应用程序. Redis有三个主要特点,使它优越于其它键值数 ...

  10. 大数据小视角5：探究SSD写放大的成因与解决思路

    笔者目前开发运维的存储系统的服务器都跑在SSD之上,目前单机服务器最大的SSD容量有4T之多.(公司好有钱,以前在实验室都只有机械硬盘用的~~)但SSD本身的特性与机械硬盘差距较大,虽然说在性能上有诸 ...