如何從一個畫布復制到其他畫布

Question

這是jsfiddle

我有這個作為我的源畫布

HTML

 <h1>Source Canvas</h1>
 <canvas id="source" width=436 height=567></canvas>
 <h1>Destination Canvas</h1>
 <canvas id="destination" width=436 height=567></canvas>

JavaScript的

 var sourceImage, ctx, sourceCanvas, destinationCanvas;
        //get the canvases
        sourceCanvas = document.getElementById('source');
        destinationCanvas = document.getElementById('destination');

    //draw the source image to the source canvas
    ctx = sourceCanvas.getContext('2d');

     function start() {

                ctx.drawImage(img1, 0, 0);

                ctx.globalCompositeOperation = "source-atop";

                var pattern = ctx.createPattern(img, 'repeat');
                ctx.rect(0, 0, sourceCanvas.width, sourceCanvas.height);
                ctx.fillStyle = pattern;
                ctx.fill();

                ctx.globalAlpha = .10;
                ctx.drawImage(img1, 0, 0);
                ctx.drawImage(img1, 0, 0);
                ctx.drawImage(img1, 0, 0);
                 //ctx.globalAlpha = 1;
            }
     var img1 = new Image();
     var img = new Image();
    img.onload = function () {

              img1.onload = function () {
                  start();
              }
img1.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
}
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";

我想在我的目標畫布中顯示源畫布中的內容。

我累了

var image, destinationCtx;

//create the image
image = new Image();

//get the base64 data
image.src = sourceCanvas.toDataURL('image/png');

//get the destination context
destinationCtx = destinationCanvas.getContext('2d');

//copy the data
destinationCtx.drawImage(image, 0, 0);

//done

但沒有運氣。 我錯過了什么嗎？ 通過imageData復制，通過Base64數據復制，通過直接繪制復制任何方法都可以完成我的工作。 當我嘗試

http://jsperf.com/copying-a-canvas-element它復制但是當我把我的源畫布編寫器它不起作用？ 我錯過了什么嗎？

Answer 1

您可以直接將一個畫布復制到其他畫布上 像這樣...

var destinationCtx;

//get the destination context
destinationCtx = destinationCanvas.getContext('2d');

//copy the data
destinationCtx.drawImage(sourceCanvas, 0, 0);

Answer 2

您可以使用源畫布中的getImageData和putImageData到目標畫布。與其他方式相比，這是最快的。

var sourceCtx, destinationCtx, imageData;

sourceCtx = sourceCanvas.getContext('2d');
destinationCtx = destinationCanvas.getContext('2d');

imageData = sourceCtx.getImageData(0, 0, sourceCanvas.width - 1, sourceCanvas.height - 1);

destinationCtx.putImageData(imageData, 0, 0);

來源：/ https://jsperf.com/copying-a-canvas-element