canvas将图片转为base64

最新推荐文章于 2024-06-11 09:46:05 发布

weixin_30632883

最新推荐文章于 2024-06-11 09:46:05 发布

阅读量183

点赞数

原文链接：http://www.cnblogs.com/xiaoyucoding/p/6636670.html

版权

最简例子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>canvas将图片转为base64</title>
        <style type="text/css">
            body {
                margin: 0;
            }
        </style>
    </head>

    <body>
        <img src="//img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png" id="img" />
        <canvas id="load_area" width="100%" height="224px"></canvas>
        
    </body>

</html>

纯js版

var appendCanvas = function() {
    var body = document.body;
    var canvas = document.createElement('canvas');
    body.appendChild(canvas);
    return canvas;
};

var createImage = function(url) {
    var img = new Image();
    img.setAttribute('crossOrigin', 'anonymous');
    img.src = url;
    return img;
};

var imageToBase64 = function(url) {
    var canvas = appendCanvas();
    var context = canvas.getContext('2d');
    var tmpImage = createImage(url);
    var base64Str = '';
    tmpImage.onload = function() {
        canvas.width = tmpImage.width;
        canvas.height = tmpImage.height;
        context.drawImage(tmpImage, 0, 0);
        base64Str = canvas.toDataURL('image/jpg');
        console.log(base64Str);
    };
};

转载于:https://www.cnblogs.com/xiaoyucoding/p/6636670.html