javascript - HTML2Canvas 选项语法

Question

我在 HTML2Canvas 脚本的文档上苦苦挣扎。具体位于 here 的选项.我已经通过使用像这样的对象弄清楚了语法:html2canvas(element, {option: value}); 但我不知道脚本期望的实际值是什么。

我的具体目标是在我的网站上显示一个大约 1000 像素 x 500 像素但保存两倍于该尺寸的图像的 div。 (我想保存一张 1920 x 1080 的图像，但我希望可自定义的 div 在构建时能够舒适地适应屏幕。)

我猜我需要使用宽度、高度、比例、windowWidth 和 windowHeight 选项的组合，但我只能找出宽度和高度的值语法。有没有熟悉此脚本的人可以为我指明正确的方向？

Answer 1

这是来自 my own website 的示例- 我在页面上抓取一个 div 的内容，然后像这样将它渲染到 Canvas 上:

var target_container = document.getElementById("id_of_div_I_want_to_render_on_canvas");
html2canvas(target_container, {
    onrendered: function(canvas) {
        var canvas_image = canvas.toDataURL("image/png"), // change output image type here
            img = new Image(); // create a new blank image

        img.src = canvas_image; // set the canvas_image as the new image's source
        img.width = el.offsetWidth; // make the image the same width and height as the target container
        img.height = el.offsetHeight;
        img.onload = function () {
            // do stuff
        });
    },
    width: <set your desired canvas width if you do not use my sizing above for img.width, img.height - e.g. '1000px'>,
    height: <set your height e.g. '500px'>
});

就我而言，关键属性是 onrendered 回调，它允许您在渲染后调用函数并将“动态”生成的 Canvas 存储在图像中。