如何生成带有隐藏源（html）的html2canvas图像div

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

例：

这是怎么回事，现在

这是它应该如何看

所以，当我申请显示：在无源div的css，图像效果是这样的：

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

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源代码。感谢advace。

来源

2017-03-07 ricardorios

而不是试图隐藏它之前，画布呈现后隐藏（或删除）它。

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

，避免HTML内容的闪光灯，可以使用一些CSS欺骗来掩盖原始的HTML。我在这里做了一个例子，但是您可以根据自己的实际需要进行调整。 https://jsfiddle.net/m5zq2kzn/

来源

2017-03-07 17:33:06 Pango

感谢您的回答，不幸的是，我不能使用绝对/相对，因为所有的页面都会打破这个问题 – ricardorios

可能有办法，但我不知道页面的结构。其他一些要尝试的事情是：将所有相对定位的div包装为如下所示：https://jsfiddle.net/m5zq2kzn/1/或者使用相对像这样的图像div：https：//jsfiddle.net/m5zq2kzn/2 /。实际上，再看一遍之后，你可能会这样做：https：//jsfiddle.net/m5zq2kzn/5/，无论如何，这应该不重要。 – Pango

如何生成带有隐藏源（html）的html2canvas图像div

回答

相关问题