バイト配列をキャンバスなしのイメージデータに変換

Question

キャンバスを使用せずにバイト配列をイメージデータに変換することはどうしてですか？

私は現在、このようなものを使用していますが、キャンバスなしでもできますか、間違っていますか？

var canvas = document.getElementsByTagName("canvas")[0]; 
var ctx = canvas.getContext("2d"); 

var byteArray = [ 
    255, 0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, // red 
    0, 255, 0, 255, 0, 255, 0, 255, 0, 255, 0, 255, // green 
    0, 0, 255, 255, 0, 0, 255, 255, 0, 0, 255, 255 // blue 
]; 

var imageData = ctx.getImageData(0, 0, 10, 3); 
for(var i = 0; i < byteArray.length; i+=4){ 
    imageData.data[i] = byteArray[i]; 
    imageData.data[i+1] = byteArray[i + 1]; 
    imageData.data[i+2] = byteArray[i + 2]; 
    imageData.data[i+3] = byteArray[i + 3]; 
} 

ctx.putImageData(imageData, 0, 0); 

http://jsfiddle.net/ARTsinn/swnqS/

更新

私はすでにBASE64-URIが、ノー成功に変換しようとしました：

'data:image/png;base64,' + btoa(String.fromCharCode.apply(this, byteArray));

アップデート2

は をoldIEは（および他の）それをサポートしていないという事実はむしろ、キャンバス自体はそれをでない問題

から質問を分割するには。

interface ImageData { 
    readonly attribute unsigned long width; 
    readonly attribute unsigned long height; 
    readonly attribute Uint8ClampedArray data; 
}; 

（参照：...そしてexcanvasまたは flashcanvasのようなライブラリは、このユースケースのために少しあまりにも肥大化したようだ...

Answer 1

canvas.getImageDataは次のようになりますのImageDataオブジェクトを返します。仕様：http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#imagedata）

私はあなたのデータにフィットするデータをボックスに入れて試してみると思います。

あなたがしようとした場合、私はそれがまた:)

が判明方法を知ってみましょう、あなたの希望の幅/高さのメモリ内のキャンバス作成することができます - 、のdocument.createElement（「キャンバス」）次に、そのイメージを取得し、あなた自身の配列を接続します。私はこの作品が分かっています。はい...あなたの質問に反するが、あなたのページにキャンバスを追加していない。

Answer 2

キャンバスを使用したくない理由はありますか？これは本当にキャンバスのためのものです。イメージデータを取得したら、それを使って何をしますか？ブラウザでレンダリングしますか？サーバーに送信しますか？ユーザーにダウンロードしますか？問題がちょうどあなたがキャンバスを画面に表示したくない場合は、作業を行う隠しキャンバスを作成することができます。