24

javascript に保存されている PNG 画像をレンダリングしようとしていますUint8Array。私が最初に試したコードは次のとおりです。

var imgByteStr = String.fromCharCode.apply(null, this.imgBytes);

var pageImg = new Image();
pageImg.onload = function(e) {

    // Draw onto the canvas
    canvasContext.drawImage(pageImg, 0, 0);

};

// Attempt to generate the Data URI from the binary
// 3rd-party library adds toBase64() as a string function
pageImg.src="data:image/png;base64,"+encodeURIComponent(imgByteStr.toBase64());

しかし、何らかの理由で onload 関数が実行されていないことがわかりました (Chrome にブレークポイントを設定したのに、まったくヒットしませんでした)。src を Data URI ではなく URL に設定すると、正しく機能することがわかりました。ただし、いくつかの制約により、画像の URL を直接参照することはできませんUInt8Array。

また、少し複雑なことに、これらのイメージのサイズはメガバイトになる場合があります。私が読んだことによると、非常に大きな画像にデータ URI を使用しようとすると、互換性の問題があります。このため、私はそれらを利用することを非常にためらっています。

したがって、問題は、データ URI を使用したり、画像 URL を直接参照したりせずに、このバイト配列を PNG としてキャンバス コンテキストにレンダリングするにはどうすればよいかということです。

また、関数を使用して画像データを直接操作するために、次のようなものを使用してみましたputImageData。この機能がどのように機能するかを 100% 理解しているわけではないことに注意してください。

var imgdata = canvasContext.createImageData(this.baseHeight, this.baseWidth);
var imgdatalen = imgdata.data.length;
for(var i=0; i<imgdatalen; i++) {
    imgdata.data[i] = _this.imgBytes[i];
}
canvasContext.putImageData(imgdata, 0, 0);

タブを閉じたブログから削除されたので、適切なクレジットを与えなかったことをお詫びします。

また、このことをゆっくりと叩いているうちに、 Chrome でエラーが発生しましたSECURITY_ERR: DOM Exception 18。drawImage を使用してイメージがキャンバスにロードされるとすぐに、いくつかの追加の回避策なしでは取得できないことが判明しました。このトピックに関する Chromium ブログの投稿は特に役に立ちました

4

3 に答える 3

31

既に UInt8Array がある場合は、 and の使用を検討する必要がBlobありcreateObjectURLます。createObjectURL外部からロードされるファイルであるかのように、内部で作成されたバイナリ データのブロブにブラウザがアクセスできるようにする特別な URL を割り当てます。

サポートされている場合、createObjectURL巨大なデータ URI の優れた代替手段です。Opera、IE < 10、およびモバイル ブラウザーの最新バージョンを除くすべてで、データ URI の使用にフォールバックする必要がある場合があります。

var myArray; //= your data in a UInt8Array
var blob = new Blob([myArray], {'type': 'image/png'});
var url = URL.createObjectURL(blob); //possibly `webkitURL` or another vendor prefix for old browsers.
于 2012-12-19T19:09:08.737 に答える
24

PNGデータがメモリにある場合（これはあなたが説明しているものだと思います）、そこから画像を作成できます。HTML では次のようになります。

 <img src="data:image/png;base64,KSjs9JdldhAlisflAkshf==" />

JavaScript でも同じことができます。

var image = document.createElement('img');
    image.src = 'data:image/png;base64,' + base64Data;

PNG データがない場合は、MIME タイプを変更できることに注意してください。

次に、または同様のものimageを使用してキャンバスに描画できます。context.drawImage(image, 0, 0)

パズルの残りの部分は、コンテンツをUint8ArrayBase 64 データにエンコードすることです。

var array = new Uint8Array(),
    base64Data = btoa(String.fromCharCode.apply(null, array));

この機能btoaは標準ではないため、一部のブラウザではサポートされていない場合があります。しかし、ほとんどのようです。それ以外の場合は、私が使用するコードが役立つ場合があります。

私はこれを自分でテストしていません！

于 2012-12-19T12:07:37.853 に答える