画布/照片- getImageData不工作

Question

我正在将图片加载到画布中；我是drawImage()，将getImageData()存储到一个用于操作的变量中。我希望能够多次操作数据，例如:添加/删除各种过滤器。如何存储数据，以便每次使用putImageData()绘制图片时都会更新？

基本上，我认为我误解了getImageData的使用或错误地使用它。我的想法是，对图片所做的任何操作，我都可以运行getImageData并更新包含信息的变量，并使用它“重绘”图片。

示例:在下面的片段中，假设我运行了一个函数，将图片黑白。我有另一个函数，当图片被点击时，它会调整大小。当我调整图片的大小时，黑白滤镜就消失了。我把照片的信息保存下来有什么不对的？

//Read in picture
var reader = new FileReader();
                reader.onload = function leDraw(e){
                    imgObj = new Image();
                    picWidth = canvas.width/2;
                    picHeight = canvas.height/2;
                    imgObj.src = e.target.result;
                    newX = 0;
                    newY = 0;
                    ctx.drawImage(imgObj,0,0, picWidth, picHeight);
                    imageData = ctx.getImageData(newX,newY, canvas.width, canvas.height);
                    originalCopy = ctx.getImageData(newX,newY, picWidth, picHeight);
                    data = imageData.data;

function resize(val){ Resizes picture

        userPicHeight = document.getElementById("cSelect").value;
        userPicWidth = document.getElementById("cSelect").value;
        ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.drawImage(imgObj, newX, newY, userPicWidth, userPicHeight);
        window['imageData'] = ctx.getImageData(newX,newY, userPicWidth, userPicHeight);
        ctx.putImageData(imageData, newX, newY);
    };

Answer 1

imageData是画布像素数据的快照。在您的例子中，这是整个画布的(彩色-而不是B&W)像素数据。

因此，当您执行.putImageData(imageData...)时，未更改的快照将再次显示在画布上。

(如果您想重新播放图片的B&W版本：)

1. 在用var memCanvas = document.createElement创建的新画布上绘制彩色图像。将画布大小调整到图像大小。画布可以留在内存中--不需要将其appendChild到DOM中。
2. 使用getImageData将过滤器应用于新画布，修改像素数据，putImageData。现在您有了一个“图像画布”，您以后可以使用它来调整大小等。
3. 将图像画布绘制到可见的画布上：context.drawImage(memCanvas,0,0)。是的，memCanvas可以是drawImage的图像源。
4. 要缩放B&W版本的图像，只需清除画布，使用context.scale缩放画布，然后用drawImage(memCanvas,0,0)绘制缩放后的B&W图像。

如果您以后想重新还原B&W图像，您可以再次执行Step#4。

使用灰度过滤器的示例代码和演示：

​

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image
img.crossOrigin='anonymous';
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png";
function start(){

    // create a grayscale image-canvas
    var grayImg=makeFilteredImageCanvas(img,grayscaleFilter);
    
    // scale the visible canvas
    ctx.scale(1.25,1.25);
    
    // draw the grayscale imag-canvas on the canvas
    // (the result will be scaled)
    ctx.drawImage(grayImg,0,0);

}

function makeFilteredImageCanvas(img,filter){
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    iw=c.width=img.width;
    ih=c.height=img.height;
    cctx.drawImage(img,0,0);
    filter(cctx);
    return(c);
}

function grayscaleFilter(context){
    var canvas=context.canvas;
    var w=canvas.width;
    var h=canvas.height;
    var imageData=context.getImageData(0,0,w,h);
    var data=imageData.data;
    for(var i=0;i<data.length;i+=4){
          var gray=data[i]*0.33+data[i+1]*0.5+data[i+2]*0.16;
          data[i]=data[i+1]=data[i+2]=gray;
    }
    context.putImageData(imageData,0,0);
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<h4>Grayscale image scaled up by 25%</h4>
<canvas id="canvas" width=300 height=300></canvas>
<h4>Original Image:</h4>
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/kingcard.png' crossOrigin='anonymous'>

​