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

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

posted on 2018-05-28 11:41 今夜太冷阅读(979) 评论(0) 编辑收藏举报

搜索

常用链接

积分与排名

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

JavaScript – Convert Image to Base64 String