javascript - 如何在另一个 Canvas 中使用在一个 Canvas 中生成的新图像

Question

这个问题已经有答案了:

How to Copy Contents of One Canvas to Another Canvas Locally (2 个回答)

已关闭 6 年前。

我使用 Canvas 裁剪 jpg，我希望在另一个 Canvas 中使用此裁剪后的 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';

/*************使用裁剪 img 的 Canvas *********/

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

Answer 1

这不是将一个 Canvas 绘制到另一个 Canvas 上的标准方法，并且不鼓励这样做，但是如果您想使用此方法，您可以随时将第一个 Canvas 转换为它的 dataURL 并使用作为 src:

img.src = canvas1.toDataURL() 非常适合您。

查看 mdn 页面 .toDataURL() .

标准方法是简单地将一个 Canvas 绘制在另一个 Canvas 上:

ctx2.drawImage(canvas1,0,0)

更多信息可以在 .drawImage() 的 mdn 页面中找到