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

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

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

<!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 = ;//要渲染的图片数

        var w = ;//canvas的宽

        var h = ;//canvas的高

        var img = new Image();

        img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题

        img.src = url;

        //渲染方法

        var imgs = function () {

            context.drawImage(img, , , w, h);

            //导出

            var base64Img = canvas.toDataURL('image/jpg');

            console.log(base64Img);

        }

        img.onload = function () {

            urlNumber -= ;

            if (urlNumber === ) {

                imgs();

            }

        }

    </script>

</body>

</html>

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

如果要传到后台，就以字符串的形式保存就好了；取用的时候也是直接取字符串。

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

巴特西

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

最新文章

热门文章