Javascript HTML5画布：使用getImageData和putImageData复制图片

几天来，我一直在尝试使用Canvas API和getImageData和putImageData来复制图像，下面是我在web上找到的一些教程。使用正方形或从画布上绘制的任何其他形式都很简单，但使用外部图片似乎更难

你可以看到我是如何尝试的，如果你有解决办法，我很乐意阅读。 我试着读放在画布左侧的图像，然后在同一画布的右侧复制它

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();

var c=document.getElementById（“画布”），
ctx=c.getContext（'2d'）；
img=新图像（），
img.src=”http://nagisalloum.com/wp-content/uploads/2012/01/white-duck-water2.jpeg";
img.onload=函数（）{
ctx.drawImage（img，0，0，400，300）；
}
//阅读画布的宽度和高度
变量宽度=c.宽度，
高度=c.高度，
w2=宽度/2，
imgData=ctx.getImageData（0,0,400,300）；
函数图（）{
var指数=（高度*w2）*4；
对于（index=0；index首先：变量定义的开头有语法错误：

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);
}

我想这可能与：

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