3

html5FileReaderAPIから直接キャンバスに画像を描画する方法を探しています。

通常の方法は、新しい画像オブジェクトを作成し、onloadを待ってから、を使用してキャンバスに描画することdrawImage()です。

ただし、説明する必要のない特定のケースでは、可能な限り画像データの読み込みを完全にバイパスしたいと思います。

filereader apiがサポートしているので、readAsArrayBuffer()ctx.putImageData（array）を使用して画像をレンダリングするために、このarraybufferを取得してcanvasimageDataに変換する方法があるかどうか疑問に思いました。

前もって感謝します。

4

1 に答える 1

2

画像の読み込みは必要なステップだと思います。プロセスの一方の端には、JPEGまたはPNG（またはBMP、その他のmimeタイプ）のバイナリブロブがあり、もう一方の端には、生のピクセルデータを含む配列があります。この変換を技術的に自分でコーディングすることもできますがfileReader.readAsDataURL、ctx.drawImageメソッドは内部でこれを行います。

FWIW、彼は私がキャンバスに画像を描く方法です。

// read binary data from file object
var fileRead = function(file){
    var reader = new FileReader();
    reader.onload = fileReadComplete;
    reader.readAsDataURL(file);
    };

// convert binary data to image object
var fileReadComplete = function(e){
    var img = new Image();
    img.src = e.target.result;
    (function(){
        if (img.complete){
            ctx.drawImage(img);
            }
        else {
            setTimeout(arguments.callee, 50);
            }
        })();
    };
于 2013-03-14T13:05:03.263 に答える