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>