HTML5 Canvas：使用 getImageData 和 putImageData 再现图片答案

【问题标题】：HTML5 Canvas : Reproduce a picture with getImageData and putImageDataHTML5 Canvas：使用 getImageData 和 putImageData 再现图片
【发布时间】：2015-02-18 18:21:50
【问题描述】：

我已经尝试了几天来仅使用带有 getImageData 和 putImageData 的 Canvas API 来重现图像，遵循我在网上找到的一些教程。使用从 Canvas 绘制的正方形或任何其他形式很简单，但使用外部图片似乎更难。

你可以看看我是如何尝试的，如果你有解决方案，我很乐意阅读。我尝试读取放置在画布左侧的图像，然后将其复制到同一画布的右侧。

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/

感谢您的帮助！

【问题讨论】：

标签： javascript image canvas getimagedata putimagedata

【解决方案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";

其次，图像数据不会在onload之前出现，所以这样会更好：

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.

【讨论】：