canvs导出为img脚本

最新推荐文章于 2023-05-04 18:23:41 发布

yunsiyu

最新推荐文章于 2023-05-04 18:23:41 发布

阅读量73

点赞数

分类专栏： web开发文章标签：前端 html javascript

本文链接：https://blog.csdn.net/zhangyun1107892254/article/details/128095614

版权

web开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

function downloadFile(content, fileName) { //下载base64图片
    var base64ToBlob = function(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for(let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
            type: contentType
        });
    };
    let aLink = document.createElement('a');
    let blob = base64ToBlob(content); //new Blob([content]);
    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.click();
};

var canvas=document.getElementById("page_1");
var ctx=canvas.getContext("2d");
var newImg = new Image();
newImg.src=canvas.toDataURL("image/png");

downloadFile(newImg.src，'图片名称' );