キャンバス/写真 - 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の画像ソースになります。後で再したい場合はdrawImage(memCanvas,0,0)

でスケーリングB & Wの画像を描画し、その後、画像のB & Wバージョンをスケーリングだけでキャンバスをクリアし、context.scale &でキャンバスを拡張する

B &イメージを再調整すると、ステップ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'>