Question

我正在使用 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)");  
    });

所以我在画布上有点新手，所以如果有任何其他图书馆可以提供帮助，那就太好了。提前致谢

将 HTML div 转换为已有背景图像的图像

0 个答案: