如何使用畫布生成新的IMG，在其他畫布

Question

我使用畫布裁剪JPG，我想利用這個裁剪IMG在其他畫布

/********** **** CANVAS裁剪圖像img *********/

var canvas1 = document.getElementById('Canvas1'); 
    var context1 = canvas1.getContext('2d'); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
    // draw cropped image 
    var sourceX = 90; 
    var sourceY = 0; 
    var sourceWidth = 319; 
    var sourceHeight = 319; 
    var destWidth = sourceWidth; 
    var destHeight = sourceHeight; 
    var destX = canvas1.width/2 - destWidth/2; 
    var destY = canvas1.height/2 - destHeight/2; 

    context1.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); 
    }; 
    imageObj.src = 'OriginImg.jpg'; 

/************** CANVAS使用裁剪img ******* **/

var canvas2 = document.getElementById('Canvas2'); 
    var context2 = canvas2.getContext('2d'); 
    var img = new Image(); 
    img.src = canvas1; 
    context2.drawImage(img, 10,10); 

Answer 1

這不是畫在畫布上一個又一個的標準方式，並鼓勵，但如果你想使用此方法，喲你總是可以將第一個畫布變成dataURL，並將其作爲src使用：

img.src = canvas1.toDataURL()對你來說工作得很好。

查看.toDataURL()的mdn頁面。

的標準方法是簡單地畫油畫的一個在另一個：

ctx2.drawImage(canvas1, 0, 0)

更多信息可以在MDN頁中找到.drawImage()