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

问题描述：

我使用画布裁剪JPG，我想利用这个裁剪IMG在其他画布如何使用画布生成新的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);

我需要知道如何使用第一第二个画布的img.src中的画布 – gurrumo

答

这不是画在画布上一个又一个的标准方式，并鼓励，但如果你想使用此方法，哟你总是可以将第一个画布变成dataURL，并将其作为src使用：

img.src = canvas1.toDataURL()对你来说工作得很好。

查看.toDataURL()的mdn页面。

的标准方法是简单地画油画的一个在另一个：

ctx2.drawImage(canvas1, 0, 0)

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

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

相关推荐