javascript - 使用 jQuery/JavaScript Div 到图像

Question

我正在尝试使用 html2canvas 将 div 转换为图像图书馆。我试过了，但没有成功，无法将完整的 div 转换为图像，图像中缺少滴管。

网址:https://www.makethatvape.com/ejuicecalc/

尝试使用代码:

html2canvas($("#widget")).then(function(canvas) {
   bimg = canvas.toDataURL();  // by default png
});

所以，想知道如何克服这个问题。我玩过 html2canvas，它适用于文本和 CSS div 到 Canvas 的转换。

Answer 1

试试这个

<div id="copyDiv"></div>

---

    var element = $("#widget"); // global variable
    var getCanvas; // global variable
    
    html2canvas(element, {
             onrendered: function (canvas) {
                    $("#copyDiv").append(canvas);
                    getCanvas = canvas;
                 }
      });

---

注意:如果 HTML 标记包含图像标签，那么对于某些浏览器，上述代码将无法创建它的图像。要完成这项工作，您需要使用 2 个参数，即 allowTaint、useCORS

示例代码:

html2canvas(document.getElementById("html-content-holder"), {
            allowTaint: true, useCORS: true
        }).then(function (canvas) {
            var anchorTag = document.createElement("a");
            document.body.appendChild(anchorTag);
            document.getElementById("previewImg").appendChild(canvas);
            anchorTag.download = "filename.jpg";
            anchorTag.href = canvas.toDataURL();
            anchorTag.target = '_blank';
            anchorTag.click();
        });

详细文章:Convert HTML to image using jQuery / Javascript with live demos