如何生成带有隐藏源 (html) div 的 html2canvas 图像答案

【问题标题】：How to generate a html2canvas images with a hidden source (html) div如何生成带有隐藏源 (html) div 的 html2canvas 图像
【发布时间】：2021-12-09 03:00:00
【问题描述】：

我在一个项目中工作，我需要生成任何成员的个人资料图片及其评论和一些数据，我开始使用 GDI，但它很难理解，所以我搜索了其他选项并发现Html2Canvas 与 javascript/jquery 一起工作，一切都很好，唯一我无法处理的事情，并且想知道是否有一种方法可以隐藏源 html div 而不会破坏结果图像。

例如：

现在是这样的

应该是这样的

所以，当我在源 div 的 css 上应用 display:none 时，图像结果是这样的：

最后是我目前的代码

var div_to_hide = $("#mydiv:hidden");
$(function() {
    $('span.stars').stars();
});
html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
    }
});
$.fn.stars = function() {
    return $(this).each(function() {
        var val = parseFloat($(this).html());
        val = Math.round(val * 4) / 4;
        var size = Math.max(0, (Math.min(5, val))) * 16;
        var $span = $('<span />').width(size);
        $(this).html($span);
    });
}

https://jsfiddle.net/ricardojriosr/6ap9Lx1f/8/

现在的问题是我如何使这项工作只显示图像而不显示 HTML 源代码。提前致谢。

【问题讨论】：

标签： javascript jquery html css html2canvas

【解决方案1】：

与其在之前尝试隐藏它，不如在画布渲染后隐藏（或移除）它。

我不知道为什么var div_to_hide 等于$("#mydiv:hidden");，但如果你将其更改为var div_to_hide = $("#mydiv");，那么在第12 行，附加图像后，你可以运行div_to_hide.hide();

为了避免 HTML 内容的闪现，您可以使用一些 CSS 技巧来掩盖原始 HTML。我在这里做了一个例子，但你可以调整以适应你的实际需求。 https://jsfiddle.net/m5zq2kzn/

【讨论】：

感谢您的回答，不幸的是我不能使用绝对/相对，因为所有页面都会破坏 css
可能有办法解决这个问题，但是我不知道页面的结构。其他一些要尝试的事情是：将所有内容包装成一个相对定位的 div，如下所示：jsfiddle.net/m5zq2kzn/1 或使用相对于图像 div，如下所示：jsfiddle.net/m5zq2kzn/2。实际上，再看一遍之后，你也许可以这样做：jsfiddle.net/m5zq2kzn/5，这应该没关系，因为那个 div 无论如何都会消失。

【解决方案2】：

我遇到了同样的问题。

对我有用的解决方案是一个 css 技巧来定位我想在屏幕外隐藏的 div：

.offscreen {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
  }

然后像这样使用它：

html2canvas(document.getElementById("ticket_template"))
.then((canvas) => {
  let imgData = canvas.toDataURL('image/png');
});

【讨论】：