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

Question

我在一个元素中工作，我需要生成任何成员的个人资料图片及其评论，以及一些数据，我开始使用 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 源代码。提前致谢。

Answer 1

不要在之前尝试隐藏它，而是在 Canvas 渲染后隐藏(或移除)它。

我不确定为什么 var div_to_hide 等于 $("#mydiv:hidden"); 但是如果你把它改成 var div_to_hide = $( "#mydiv"); 然后，在第 12 行，附加图像后，您可以运行 div_to_hide.hide();

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