HTML5 Canvas：使用getImageData和putImageData復制圖片

Question

遵循我在網上找到的一些教程，我一直在嘗試幾天，僅使用Canvas API和getImageData和putImageData來復制圖像。 使用正方形或從“畫布”繪制的任何其他形式都很簡單，但是使用外部圖片似乎更難。

您可以看到我的嘗試方式，如果您有解決方案，我很樂於閱讀。 我試圖讀取放在畫布左側的圖像，然后在同一畫布的右側重現它。

var c       = document.getElementById("canvas"),
    ctx     = c.getContext('2d');
    img     = new Image(),
    img.src = "http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";

img.onload = function(){
    ctx.drawImage(img, 0, 0, 400, 300);
}


//read the width and height of the canvas
var width   = c.width,
    height  = c.height,
    w2      = width / 2,
    imgData = ctx.getImageData(0, 0, 400, 300);

function drawing(){
    var index= (height * w2) * 4;   
    for(index= 0; index<=imgData.data.length; index+=4){
        red     = imgData.data[index];
        green   = imgData.data[index+1];
        blue    = imgData.data[index+2];
        alpha   = imgData.data[index+3]; 
    }
        ctx.putImageData(imgData, w2, 300);
}

drawing();

這是一個小提琴： http : //jsfiddle.net/6g82o9Lk/

謝謝您的幫助！

Answer 1

首先，首先在您的var定義中出現語法錯誤：

var c       = document.getElementById("canvas"),
    ctx     = c.getContext('2d'),
    img     = new Image();
img.src = "http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";

其次，圖像數據將不在加載之前，因此會更好：

img.onload = function(){
    ctx.drawImage(img, 0, 0, 400, 300);
    drawing();
}

function drawing(){
    //read the width and height of the canvas
    var width   = c.width,
    height  = c.height,
    w2      = width / 2,
    imgData = ctx.getImageData(0, 0, 400, 300);

    var index= (height * w2) * 4;   
    for(index= 0; index<=imgData.data.length; index+=4){
        red     = imgData.data[index];
        green   = imgData.data[index+1];
        blue    = imgData.data[index+2];
        alpha   = imgData.data[index+3]; 
    }
        ctx.putImageData(imgData, w2, 300);
}

但最重要的是：在Chrome中，您會收到一個安全錯誤。

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

我想這可能是有關的： 如何修復getImageData（）錯誤畫布已被跨域數據污染？