我有3个 Canvas ,即canvasTarget、canvasTarget2、canvasTarget3,如下所示:
var canvas = document.getElementById("canvasTarget");
var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var canvas2 = document.getElementById("canvasTarget2");
var img2 = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream");
var canvas3 = document.getElementById("canvasTarget3");
var img3 = canvas3.toDataURL("image/png").replace("image/png", "image/octet-stream");
我想将这些 Canvas 元素合并为一个并下载为 JPEG 或 PDF 文件。 我正在使用/html2canvas.js 来下载它。 任何立即回复将不胜感激。
最佳答案
所以你已经渲染了你的 Canvas ,但不清楚你想要如何组合它们 - 重叠、并排?无论哪种情况,您都可以使用 Canvas.context.drawImage() 将它们添加到新的 Canvas 对象,然后使用 Canvas.toDataURL() 方法返回,呃,新 Canvas 的 dataURL。
也许是这样的......
/* assumes each canvas has the same dimensions */
var overlayCanvases = function(cnv1, cnv2, cnv3) {
var newCanvas = document.createElement('canvas'),
ctx = newCanvas.getContext('2d'),
width = cnv1.width,
height = cnv1.height;
newCanvas.width = width;
newCanvas.height = height;
[cnv1, cnv2, cnv3].forEach(function(n) {
ctx.beginPath();
ctx.drawImage(n, 0, 0, width, height);
});
return newCanvas.toDataURL();
};
/* assumes each canvas has the same width */
var verticalCanvases = function(cnv1, cnv2, cnv3) {
var newCanvas = document.createElement('canvas'),
ctx = newCanvas.getContext('2d'),
width = cnv1.width,
height = cnv1.height + cnv2.height + cnv3.height;
newCanvas.width = width;
newCanvas.height = height;
[{
cnv: cnv1,
y: 0
},
{
cnv: cnv2,
y: cnv1.height
},
{
cnv: cnv3,
y: cnv1.height + cnv2.height
}].forEach(function(n) {
ctx.beginPath();
ctx.drawImage(n.cnv, 0, n.y, width, n.cnv.height);
});
return newCanvas.toDataURL();
};
/* USAGE */
var dURL1 = overlayCanvases(canvas1,canvas2,canvas3);
var dURL2 = verticalCanvases(canvas1,canvas2,canvas3);
overlayCanvases()
函数会将 Canvas 放置在彼此的顶部,因此参数的顺序很重要。 verticalCanvases()
将按降序垂直对齐 Canvas 。这里需要注意的重要一点是,Canvas.context.drawImage()
允许您将一个 Canvas 绘制到另一个 Canvas 上 - 可以调整相对位置以满足您的目的。
关于javascript - 如何使用 javascript/jquery 将 3 个 Canvas HTML 元素合并到 1 个图像文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38851963/