Javascript 如何使用隐藏源代码（html）div生成html2canvas图像

我在一个项目中工作，我需要生成任何成员及其评论的概要图片和一些数据，我开始使用GDI，但它太难理解了，所以我搜索了其他选项，发现它可以与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);
    });
}

var div_to_hide=$（“#mydiv:hidden”）；
$（函数（）{
$（'span.stars'）.stars（）；
});
html2canvas（[document.getElementById（'mydiv'））]{
onrendered：函数（画布）{
document.getElementById（'canvas'）.appendChild（canvas）；
var data=canvas.toDataURL（'image/png'）；
var image=新图像（）；
image.src=数据；
document.getElementById（'image'）.appendChild（image）；
}
});
$.fn.stars=函数（）{
返回$（this）.each（函数（）{
var val=parseFloat（$（this.html（））；
val=数学四舍五入（val*4）/4；
变量大小=数学最大值（0，（数学最小值（5，val））*16；
变量$span=$（''）。宽度（大小）；
$（this.html（$span）；
});
}

---

现在的问题是，我如何使这项工作只显示图像，而不是HTML源代码。感谢您的支持。

在画布渲染后隐藏（或删除）它，而不是尝试在渲染前隐藏它

我不知道为什么

var div_to_hide

等于

$（“#mydiv:hidden”）但如果将其更改为
var div_to_hide=$（“#mydiv”）然后，在第12行附加图像后，可以运行
div_to_hide.hide（）

为了避免HTML内容的闪现，您可以使用一些CSS技巧来掩盖原始HTML。我在这里举了一个例子，但是你可以根据自己的实际需要进行调整
 谢谢你的回答，不幸的是我不能使用绝对/相对，因为所有的页面都会断开。可能有一些方法可以解决这个问题，但是我不知道页面的结构。其他一些尝试是：像这样将所有内容包装为相对定位的div：或者像这样对image div使用relative:。事实上，再看一遍之后，你也许可以这样做：，这不重要，因为那个div已经消失了。