JavaScript – Convert Image to Base64 String

最新推荐文章于 2024-01-25 12:30:48 发布

weixin_34384681

最新推荐文章于 2024-01-25 12:30:48 发布

阅读量128

点赞数

文章标签： javascript ViewUI

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" οnchange="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" οnclick="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