js 实现 canvas 保存图片为 png 格式并下载到本地

2021-05-10 更新

    function restoreImg() {
        let name = prompt('请输入要保存的图片名称', '<?=$username?>的推广二维码'); // 'canvas绘制图片'为图片默认名
        if (name === null) return false;
        if (name === "") {
            alert('名字不能为空')
        } else {
            let canvas = document.getElementsByTagName('canvas')[0];
            let href = canvas.toDataURL(); // 获取canvas对应的base64编码
            let a = document.createElement('a'); // 创建a标签
            a.download = name; // 设置图片名字
            a.href = href;
            a.dispatchEvent(new MouseEvent('click'))
        }
    }

function exportCanvasAsPNG(id, fileName) {

    var canvasElement = document.getElementById(id);

    var MIME_TYPE = "image/png";

    var imgURL = canvasElement.toDataURL(MIME_TYPE);

    var dlLink = document.createElement('a');
    dlLink.download = fileName;
    dlLink.href = imgURL;
    dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');

    document.body.appendChild(dlLink);
    dlLink.click();
    document.body.removeChild(dlLink);
}

摘自：js实现canvas保存图片为png格式并下载到本地 - 简书