HTML2Canvas 选项语法答案

【问题标题】：HTML2Canvas Options SyntaxHTML2Canvas 选项语法
【发布时间】：2018-06-07 04:35:15
【问题描述】：

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

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

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

【问题讨论】：

嗯，window.devicePixelRatio、window.innerWidth 和 window.innerHeight 都是数字，所以我会尝试数字。
我试过了，但不幸的是我没有运气。例如，我尝试了 100 和“100px”。没运气。宽度和高度采用直数，但它将画布拉伸到新的尺寸，而 div 不跟随......我只是有一个想法将我的 div 加倍并在孩子身上使用百分比。仍然想了解其他三个选项应该完成什么。

标签： javascript html2canvas

【解决方案1】：

这是来自my own website 的示例 - 我抓取页面上 div 的内容，然后将其渲染到画布上，如下所示：

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 回调，它允许您在渲染后调用函数并将“动态”生成的画布存储在图像中。

【讨论】：