html中canvas渲染图片，并转化成base64格式保存

时间 2019-11-10

标签 html canvas 渲染图片并转化成 base64 base 格式保存栏目 HTML 繁體版

原文原文链接

最近在作一个上传头像而后保存显示的功能，由于涉及到裁剪大小和尺寸比例，因此直接上传图片再展现的话，就会出现问题，因此就想用canvas来渲染裁剪后的图片，而后转化成base64格式的图片再存储，这样取用的时候也比较方便。html

我写了一个demo来展现一下怎么把一张图片渲染成canvas图片，并转化为base64格式导出。jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id='canvas'></canvas>
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');//返回一个用于在画布上绘图的环境，当前惟一的合法值是 "2d"，它指定了二维绘图，返回一个 CanvasRenderingContext2D 对象，使用它能够绘制到 Canvas 元素中

        var url = '/Content/images/demo.jpg';//图片URL
        var urlNumber = 1;//要渲染的图片数
        var w = 300;//canvas的宽
        var h = 300;//canvas的高

        var img = new Image();
        img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题
        img.src = url;

        //渲染方法
        var imgs = function () {
            context.drawImage(img, 0, 0, w, h);
            //导出
            var base64Img = canvas.toDataURL('image/jpg');
            console.log(base64Img);
        }

        img.onload = function () {
            urlNumber -= 1;
            if (urlNumber === 0) {
                imgs();
            }
        }
    </script>
</body>
</html>

运行程序，查看控制台记录的base64格式图片：canvas

若是要传到后台，就以字符串的形式保存就行了；取用的时候也是直接取字符串。跨域

/****************************我是可爱的分割线*************************************/url