我正在努力阅读有关HTML2Canvas脚本的文档。具体地说,选项位于here。我已经通过使用像这样的对象弄清楚了语法:html2canvas(element, {option: value});
,但是我不知道脚本期望的实际值是什么。
我的具体目标是有一个在我的网站上显示的div,它大约是1000px x 500px,但保存的图像是这个大小的两倍。(我想保存一个1920x1080的图像,但我想让可定制的div在构建时能够舒适地显示在屏幕上。)
我猜我需要使用width、height、scale、windowWidth和windowHeight选项的组合,但我只能弄清楚width和height的值语法。有谁熟悉这个脚本,可以给我指明正确的方向吗?
发布于 2018-06-07 04:35:15
下面是一个来自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
回调,它允许您在呈现后调用函数,并将“动态”生成的画布存储在图像中。
https://stackoverflow.com/questions/50728798
复制相似问题