javascript - JPG の arrayBuffer 表現からキャンバス imageData 配列を作成するにはどうすればよいですか

Question

まず第一に、これを達成するための標準的な方法 (readAsDataURL と drawImage) があることを認識していますが、残念ながら、この特定のユース ケースには使用できません。

次のように、filereader API を配列バッファとして使用して画像を読み取っています。

    var reader = new fileReader();
    reader.onload = function(e){

          var byteArray = new Uint8ClampedArray(e.target.result);
          //do stuff to this array
    }
    reader.readAsArrayBuffer(file);

この返されたデータを使用して、clampedarray を作成しています。

私ができるようにしたいのは、このピクセル配列をキャンバスに直接描画することですputImageData

現在、私は次のことを行っています：

var byteArray = new Uint8ClampedArray(e.target.result);
var imgdata = ctx.createImageData(img.width, img.height);
var canvdata = imgdata.data;

for (var i = 0; i < canvdata.length; i += 4) {
    canvdata[i] = byteArray[i];
    canvdata[i + 1] = byteArray[i + 1];
    canvdata[i + 2] = byteArray[i + 2];
    canvdata[i + 3] = byteArray[i + 3];
}
ctx.putImageData(imgdata, 0, 0);

この方法を使用すると、データはキャンバスに描画されますが、雪が歪んだりノイズが発生したりして、イメージが正しく表現されません。

これにより、ループ内で imagedata データを正しく構築していないか、ピクセル配列を取得する最初の方法が間違っていると思われます。

要約すると、html5 fileReader API を介して取得した (jpeg の) arraybuffer を取得し、キャンバスと互換性のある imageData 配列を作成して、後で次を使用してキャンバスにプッシュできるようにしたいと考えています。putImageData

前もって感謝します。