HTML2Canvas将2个捕获的canvas合并为一个
使用HTML2Canvas我正在尝试捕获googleMap（其工作正常）然后捕获超过它顶部的#overlay div（允许人们在特定位置将图像放在googleMap上） ）（工作良好）。
然后页面在页面上显示这两个canvas元素，然后我想再拍摄一次 ，将两个canvas组合成一个可以下载的单个图像。
到目前为止我遇到的问题是，当我尝试捕获我的#preview div时，似乎HTML2Canvas没有拾取它创建的canvas元素。
HTML：
HTML2Canvas JQuery：
$(".download").click(function() { html2canvas($("#map"), { logging: true, proxy: "https://html2canvas.appspot.com/query", onrendered: function(canvas) { // var img = canvas.toDataURL("image/png"); $(canvas).css({"position" : "absolute", "z-index" : "999"}); document.getElementById("preview").appendChild(canvas); html2canvas($("#overlay"), { logging: true, onrendered: function(canvas1) { // var img = canvas.toDataURL("image/png"); $(canvas1).css({"position" : "absolute", "z-index" : "1000"}); document.getElementById("preview").appendChild(canvas1); setTimeout(function() {downloadURI()}, 5000); } }); } }); }); function downloadURI() { html2canvas($("#preview"), { logging: true, onrendered: function(canvas2) { var img = canvas2.toDataURL("image/png"); window.open(img); // var link = document.createElement("a"); // link.download = "image-download.png"; // link.href = img; // link.click(); } }); }
正如您所看到的，我已经尝试延迟DownloadURIfunction，以防canvas未及时加载，但这不是问题。 我不确定是否有一些关于canvas元素的东西不能与插件一起使用。
工作原理 ：我的上述代码非常简单。 当一个HTML2Canvas完成时，它运行另一个HTML2Canvas。 这两个canvas都附加在#preview元素上，这样我就可以在其中的2个canvas之上捕获该元素。 一旦完成它就会运行另一个函数来捕获#preview元素，我希望 #preview两个图像一个在另一个上面组合成一个用户可以下载的单个图像，但它只返回一个空图像。
如果需要更多信息，请告诉我，谢谢。
此函数接受top和bottom两个参数。 两者都应该是ImageData对象，您可以通过ctx.getImageData()获取ctx.getImageData() 。 返回底部ImageData，并将顶部数据合并到它。 此function使用Porter-Duff方法合并颜色。
function mergeData(top, bottom){ var tD = top.data, bD = bottom.data, l = tD.length; for(var i = 0; i < l; i += 4){ //source alpha var alphaSrc = tD[i+3] / 255, //source alpha alphaDst = bD[i+3] / 255, //destination alpha alphaSrcO = 1 - alphaSrc, //(1 - x) alpha = alphaSrc + alphaDst * alphaSrcO; //if destination alpha is opaque //merge colors bD[i] = ((tD[i]*alphaSrc) + (bD[i]*alphaDst*alphaSrcO)) / alpha, bD[i+1] = ((tD[i+1]*alphaSrc) + (bD[i+1]*alphaDst*alphaSrcO)) / alpha, bD[i+2] = ((tD[i+2]*alphaSrc) + (bD[i+2]*alphaDst*alphaSrcO)) / alpha, bD[i+3] = 255*alpha; } //return bottom return bottom; }
要使用此函数及其返回的数据，请执行以下操作：
var merged = mergeData(ctx1.getImageData(), ctx2.getImageData()); ctx2.putImageData(merged, 0, 0);
显然，如果需要，您可以将结果数据放入第三个隐藏的上下文中。