HTML5 Canvas: воспроизведение изображения с помощью getImageData и putImageData

Question

В течение нескольких дней я пытался воспроизвести изображение, используя API Canvas с 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() Холст был испорчен данными из разных источников?