javascript/jquery를 사용하여 3 개의 캔버스 HTML 요소를 하나의 이미지 파일로 결합하는 방법은 무엇입니까?

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"); 

나는 하나에이 캔버스 요소를 결합하고 JPEG 또는 PDF 파일로 다운로드 할 수 있습니다. /html2canvas.js를 사용하여 다운로드 중입니다. 즉각적인 답변을 보내 주시면 감사하겠습니다.

Answer 1

캔버스를 렌더링했는데 어떻게 결합 할 것인지는 명확하지 않습니다 - 중첩, 나란히? 두 경우 모두 Canvas.context.drawImage()을 사용하여 새 캔버스 개체에 추가 한 다음 Canvas.toDataURL() 메서드를 사용하여 새 캔버스의 erm, dataURL을 반환 할 수 있습니다.

overlayCanvases() 기능은 서로의 상단에있는 캔버스를 배치합니다

/* 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); 

아마 이런 식으로 뭔가 ... 그래서 인수의 순서는 중요합니다. verticalCanvases()은 캔버스를 세로 및 내림차순으로 정렬합니다. 여기서 주목해야 할 중요한 점은 Canvas.context.drawImage()을 사용하면 하나의 캔버스를 다른 캔버스에 칠할 수 있습니다. 상대적인 위치 지정은 목적에 맞게 흔들릴 수 있습니다. 바이올린을 위

기능 : https://jsfiddle.net/BnPck/cyLrmpjy/