Question

我正在努力学习HTML2Canvas脚本上的文档。具体来说，选项位于here。我已经通过使用这样的对象来解决语法：html2canvas(element, {option: value});但我不知道脚本期望的实际值。

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

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

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

HTML2Canvas选项语法

1 个答案: