画布/照片-getImageData不起作用

Question

I am loading a picture into a canvas; I drawImage(), store getImageData() into a variable for manipulating. I would like to be able to manipulate the data many times for example: add/remove various filters. How can I store the data so that it updates every time I draw the picture with putImageData()?

Basically, I think I am misunderstanding the use of getImageData or using it incorrectly. My thought was that any manipulation that was done to the picture, I could run getImageData and update the variable that contained the information, and use it to "redraw" the picture.

Example: In the snippet below Lets say I run a function that turn the picture black and white. I have another function that resizes the picture when it is clicked. When I resize the picture the the black and white filter disappears . What am I doing wrong to keep the information of the picture?

//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 is a snapshot of canvas pixel data. In your case it's the entire canvas's (colored--not B&W) pixel data.

So when you do .putImageData(imageData...) the unaltered snapshow is again displayed on the canvas.

If you want to rescale a B&W version of your picture:

1. Draw your color image on a new canvas created with var memCanvas = document.createElement . Size the canvas to the image size. The canvas can be left in-memory -- no need to appendChild it into the DOM.

2. Apply the filter to the new canvas with getImageData , modify pixel data, putImageData . Now you have an "image-canvas" that you can later use to resize, etc.

3. Draw the image-Canvas onto the visible canvas: context.drawImage(memCanvas,0,0) . Yes, the memCanvas can be an image source for drawImage .

4. To scale the B&W version of the image, just clear the canvas, scale the canvas with context.scale & then draw the scaled B&W image with drawImage(memCanvas,0,0)

If you later want to re-rescale the B&W image, you can do Step#4 again.

Example code and a Demo using a grayscale filter:

 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'>