canvas 导出为图片兼容ie10+，谷歌，火狐等浏览器，代码详解

image.png

image.png

image.png

    
    
    


    Export Image
    

    

        // Base64 to Blob
        function base64ToBlob(code) {
            var parts = code.split(";base64,");
            var contentType = parts[0].split(":")[1];
            var raw = window.atob(parts[1]);
            var uInt8Array = new Uint8Array(raw.length);
            while (raw.length--) {
                uInt8Array[raw.length] = raw.charCodeAt(raw.length);
            }
            return new Blob([uInt8Array], {type: contentType});
        }

        // Download image
        function downLoad(url, name) {
            var a = document.createElement('a');
            a.href = url;
            a.setAttribute('download', name);
            document.body.appendChild(a);
            var e = document.createEvent('MouseEvent');
            e.initEvent('click', false, false);
            a.dispatchEvent(e);
        }

        // Method 1: IE browser
        function canvas2Img() {
            var canvas = document.getElementById('myCanvas');
            var name = 'canvas 下载';
            var base64Url = canvas.toDataURL("image/png");
            if (window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(base64ToBlob(base64Url), name + '.png');
            } else {
                downLoad(base64Url, name);
            }
        }

        // Method 2: IE browser
        function canvas2Img2() {
            var canvas = document.getElementById('myCanvas');
            var name = 'canvas 下载';
            var base64Url = canvas.toDataURL("image/png");
            if (window.navigator.msSaveOrOpenBlob) {
                var imgData = canvas.msToBlob();
                var blobObj = new Blob([imgData]);
                window.navigator.msSaveOrOpenBlob(blobObj, name + '.png');
            } else {
                downLoad(base64Url, name);
            }
        }

        // Bind click event
        var btn = document.querySelector('#btn');
        btn.onclick = function () {
            canvas2Img2();
        };

        // Canvas drawing
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(0, 0, c.width, c.height);
        ctx.font = "30px Arial";
        ctx.strokeText("Hello World", 10, 50);
    

image.png

Supported in IE9+

image.png

Supported in IE10+

Note: For IE10, additional prefix is required (msToBlob)

Both methods are similar, but msSaveBlob only supports saving, while msSaveOrOpenBlob offers both save and open options.

Provided two methods for IE handling:

• canvas2Img requires base64ToBlob method
• canvas2Img2 does not require it

Recommend canvas2Img if IE9 base64 image download is resolved; otherwise, use canvas2Img2.

If helpful, please upvote! Thank you for your support!

Article address: https://www.jianshu.com/p/9b3ad5bc131c - Please cite properly.

References:

• HTMLCanvasElement.toDataURL
• HTMLCanvasElement.toBlob
• Canvas API details
• Original article