Html 保存canvas和div为图片

背景

很多时候，需要js来完成保存某个div或者某个canvas元素成图片，本文章来实现保存为图片

保存canvas图片

 
/**
 * 保存canvas为图片
 * 用法：exportCanvasAsPNG("文件名")
 * @param fileName
 */
function exportCanvasAsPNG(fileName) {
    var canvasElement = document.getElementsByTagName("canvas")[0]
    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);
}
 
 

保存div图片

引入外部js

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.4.0/html2canvas.min.js"></script>

代码

/**
 * 保存div为图片
 *
 * 该访问为外部方法，如需使用，请解开注解，并且添加js引用
 * js引用地址：
 */
/*
html2canvas($("#qrcodeCanvas"), {
    onrendered: function(canvas) {
        var MIME_TYPE = "image/png";
        var imgURL = canvas.toDataURL(MIME_TYPE);
 
        var dlLink = document.createElement('a');
        dlLink.download = "a"
        dlLink.href = imgURL;
        dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
 
        document.body.appendChild(dlLink);
        dlLink.click();
        document.body.removeChild(dlLink);
        count = count + 1
    }
})*/