JS生成海报

Posted 2021-09-25 yingmhd

下载html2canvas

$("#btn_finished").click(function () {
    // 滚动条不置顶，生成的图片会有残缺
    document.documentElement.scrollTop = 0;
    html2canvas(document.querySelector("#theme_poster"), {
        dpi: 300 // 可以解决图片模糊问题
        // 还有其他参数，官网有文档
    }).then(canvas => {
        var pageData = canvas.toDataURL(\'image/jpeg\', 1.0);
        saveFile(pageData.replace("image/jpeg", "image/octet-stream"), new Date()
            .getTime() + ".jpeg");
    })
})
var saveFile = function (data, filename) {
    var save_link = document.createElementNS(\'http://www.w3.org/1999/xhtml\', \'a\');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent(\'MouseEvents\');
    event.initMouseEvent(\'click\', true, false, window, 0, 0, 0, 0, 0, false, false, false,
        false, 0, null);
    save_link.dispatchEvent(event);
};

如果生成过程中图片不显示，有可能是跨越问题，需要涉及到CORS