使用 HTML2Canvas 我正在 try catch 一个 googleMap(它工作正常)然后捕获一个位于它顶部的 #overlay
div(它允许人们将图像放在特定位置的 googleMap 上)(工作正常)。
页面然后在页面上显示这两个 canvas
元素,然后我想对其进行 另一个 捕获以将 2 个 Canvas 组合成一个图像然后就可以下载了。
我目前遇到的问题是,当我 try catch 我的 #preview
div 时,HTML2Canvas 似乎没有获取它创建的 canvas
元素.
HTML:
<div id="mainPanel">
<div id="overlay">
</div>
<button class="download">Download as PDF</button>
<button onclick="startEdit();" class="edit_button">Start Editing</button>
<div id="map">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
</div>
<div id="preview">
</div>
</div>
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();
}
});
}
如您所见,我已尝试延迟 DownloadURI
函数以防 Canvas 未及时加载,但这不是问题所在。我不确定是否有关于 canvas
元素的东西不适用于该插件。
它是如何工作的:我上面的代码相当简单。当一个 HTML2Canvas 完成时,它会运行另一个 HTML2Canvas。这两个 Canvas 都附加到 #preview
元素,这样我就可以捕获其中两个 Canvas 相互重叠的元素。完成后,它会运行另一个函数来捕获 #preview
元素,我希望将 2 个图像一个放在另一个之上组合成一个图像用户可以下载,但它只是返回一个空图像。
如果需要更多信息,请告诉我,谢谢。
最佳答案
此函数接受两个参数top
和bottom
。两者都应该是 ImageData 对象,您可以通过 ctx.getImageData()
获取。底部的 ImageData 返回,顶部的数据合并到它。该函数使用 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);
显然,如果需要,您可以将结果数据放入第三个隐藏上下文中。
关于javascript - HTML2Canvas 将 2 个捕获的 Canvas 合并为一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26402789/