我正在使用 html2canvas 来转换 HTML div 来转换图像,但似乎背景图像或 img 标签没有显示,而且我得到了空白部分。我也在该图像上打印文本。
这是我想要的实际屏幕截图。https://prnt.sc/ym3mz0 VS 我得到的:https://prnt.sc/ym4czm
这是我使用过的代码片段:
<div id="capture"> <!--- HTML Div to be print ------->
<img data-design="https://www.tolerance.org/sites/default/files/styles/tw_fb/public/2018-09/TT60-What-Is-White-Privilege-1800x1080.jpg?h=c51c103f&itok=tATqjk5w" src="https://www.tolerance.org/sites/default/files/styles/tw_fb/public/2018-09/TT60-What-Is-White-Privilege-1800x1080.jpg?h=c51c103f&itok=tATqjk5w">
<div style="background-image: url('https://www.tolerance.org/sites/default/files/styles/tw_fb/public/2018-09/TT60-What-Is-White-Privilege-1800x1080.jpg?h=c51c103f&itok=tATqjk5w'); height: 500px; width: 500px;"></div>
<div id="draggable">asdasdasdasdasd</div> <!--------- These texts will be movable over div --->
脚本如下:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas);
jQuery('canvas').attr('id', 'canvas');
//background image append to canvas
jQuery('canvas').css("background-image", "url(https://www.tolerance.org/sites/default/files/styles/tw_fb/public/2018-09/TT60-What-Is-White-Privilege-1800x1080.jpg?h=c51c103f&itok=tATqjk5w)");
});
所以我在画布上有点新手,所以如果有任何其他图书馆可以提供帮助,那就太好了。 提前致谢