div生成图片

/* jquery版本随意 */
/* html2canvas 0.5.0-beta3 <http://html2canvas.hertzen.com> */
/* http://www.phpied.com/rgb-color-parser-in-javascript/ */
/* http://demo.qunee.com/svg2canvas */
function download() {
    /* 要生成图片的标签 */
    let pic1 = document.getElementById("myMap");
    scrollTo(0, 0);
    if (typeof html2canvas !== ‘undefined‘) {
        /* 使用canvg处理html2canvas无法显示IDE问题 */
        let nodesToRecover = [];
        let nodesToRemove = [];
        /* divReport为需要截取成图片的dom的id */
        let svgElem = $("#myMap").find(‘svg‘);
        svgElem.each(function (index, node) {
            let parentNode = node.parentNode;
            let svg = node.outerHTML.trim();
            let canvas = document.createElement(‘canvas‘);
            canvg(canvas, svg);
            if (node.style.position) {
                canvas.style.position += node.style.position;
                canvas.style.left += node.style.left;
                canvas.style.top += node.style.top;
            }
            nodesToRecover.push({
                parent: parentNode,
                child: node,
            });
            parentNode.removeChild(node);
            nodesToRemove.push({
                parent: parentNode,
                child: canvas,
            });
            parentNode.appendChild(canvas);
        });
    }
    html2canvas(pic1, {
        /* 处理图片跨域的问题 */
        useCORS: true
    }).then(function (canvas) {
        let dataURL = canvas.toDataURL("image/png");
        /* 使用box标签预览图片 */
        // document.getElementById("box").src = dataURL;
        /* 获取base64编码然后进行下载 */
        let a = document.createElement(‘a‘);
        a.download = "picName";
        a.href = dataURL;
        a.dispatchEvent(new MouseEvent(‘click‘));
    });
}

div生成图片

原文：https://www.cnblogs.com/zhuangbowu/p/14814463.html