javascript/jqueryを使用して3つのキャンバスHTML要素を1つの画像ファイルに結合するにはどうすればよいですか？

Question

以下に示すように、私は3キャンバスすなわち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を使用しています。 すぐにお返事いただければ幸いです。

Answer 1

あなたはキャンバスをレンダリングしましたが、どのように組み合わせるかは明確ではありません - オーバーレイされた、サイドバイサイドですか？いずれの場合も、Canvas.context.drawImage()を使用して新しいキャンバスオブジェクトに追加し、Canvas.toDataURL()メソッドを使用して新しいキャンバスのerm、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()機能は、互いの上にキャンバスを置きますので、引数の順序が重要です。 verticalCanvases()は、キャンバスを垂直方向と降順に揃えます。ここで気づくべき重要なことは、Canvas.context.drawImage()があるカンバスを別のものにペイントすることを可能にすることです。相対的な位置付けは、あなたの目的に合うように揺らすことができます。

上記の機能：https://jsfiddle.net/BnPck/cyLrmpjy/