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

I am working in a project where I need to generate a profile picture of any member and its reviews, and some data, I started working with GDI, but it was so hard to understand, so I searched for other options and found Html2Canvas that works with javascript/jquery, everything is fine, the only thing I couldn't handle, and would like to know if there is a way to hide the source html div without breaking the result image.

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

Ex:

例如：

This is how is it now

这就是现在的情况

This is how it should look

这应该是它的外观

So, when I apply display:none on the css of the source div, the image result is like this:

所以，当我在源div的css上应用display：none时，图像结果如下：

And finally here is the code that I have so far

最后这是我到目前为止的代码

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/

Now the question is how do I made this work showing only the image and not the HTML source. Thanks in advace.

现在的问题是我如何使这项工作只显示图像而不是HTML源。谢谢你的推荐。

1 个解决方案

#1

Instead of trying to hide it before, hide (or remove) it after the canvas is rendered.

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

I'm not sure why var div_to_hide equals $("#mydiv:hidden"); but if you change it to var div_to_hide = $("#mydiv"); then, on line 12, after appending the image, you can run div_to_hide.hide();

我不确定为什么var div_to_hide等于$（“＃mydiv：hidden”）;但是如果你把它改成var div_to_hide = $（“＃mydiv”）;然后，在第12行，在追加图像后，你可以运行div_to_hide.hide（）;

And to avoid a flash of the HTML content, you can use some CSS trickery to cover up the original HTML. I made an example here, but you can adjust to fit whatever your actual needs are. https://jsfiddle.net/m5zq2kzn/

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

#1