#arraybuffer

[kinzal]

Canvas convert to Bitmap BLOB.

Javascriptで大量のサムネイル画像を生成する必要があったのでそのお話です。

Javascriptで画像のサムネイルを作成する場合の定番的な手法として、

Imageを作成

CanvasにImageを書き込み

Canvasで変形

CanvasからData URLに変換

という流れがあります。

var img = new Image(); img.src = '/path/to/filename'; img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var w = maxWidth/this.naturalWidth; var h = maxHeight/this.naturalHeight; var rate = w <= h ? w : h; rate = rate < 1 ? rate : 1; canvas.width = Math.round(this.naturalWidth*rate); canvas.height = Math.round(this.naturalHeight*rate); ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight, 0, 0, canvas.width, canvas.height); if (this.src.match(/^data:image\/jpeg;/)) { this.src = canvas.toDataURL('image/jpeg', 1.0); } else { this.src = canvas.toDataURL(); } };

ただし、この方法は凄い重いです。 一つの画像のサムネイルを作るだけなら気になるほどの重さではないのですが、何枚もサムネイルを作るとメインスレッドが完全に固まってしまうほどの重さになります。 何が重いかというとcanvas.toDataURLがこの処理の大部分をしめる原因になります。 （drawImageで変形すると重いのでsetTransform使う必要があるけど、その話は割愛）

他の方法としてW3Cの方をみるとcanvas.toBlobというメソッドで非同期に生成できますが、実装されているブラウザがないので自力で別の方法を実装する必要があります。 そのため、凄い面倒臭いのですがCanvasの画像データから自力で画像のバイナリを作成します。 　

Get image data from Canvas

まずはCanvasから画像のピクセルデータを取得します。

var ctx = canvas.getContext('2d'); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

取得したimageDataのimageData.dataからRGBAで4要素を取る1次元配列を取得することができます。

var red = imageData.data[0]; var green = imageData.data[1]; var blue = imageData.data[2]; var alpha = imageData.data[3];

Create Bitmap header

画像のピクセルデータの準備が出来たら、次にBitmap画像を作成していきます。 まずはBitmapのヘッダーを生成します。

function getLittleEndianHex(value) { var result = []; for (var bytes = 4; bytes > 0; bytes--) { result.push(String.fromCharCode(value & 255)); value >>= 8; } return result.join(''); } var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var bodyByteSize = imageData.data.length; // create header string var header = 'BM' + getLittleEndianHex(bodyByteSize) '\x00\x00' + '\x00\x00' + '\x36\x00\x00\x00' + '\x28\x00\x00\x00' + getLittleEndianHex(canvas.width) + getLittleEndianHex(canvas.height) + '\x01\x00' + '\x20\x00' + '\x00\x00\x00\x00' + '\x00\x00\x00\x00' + '\x13\x0B\x00\x00' + '\x13\x0B\x00\x00' + '\x00\x00\x00\x00' + '\x00\x00\x00\x00';

※ 参考サイト http://www.worldwidewhat.net/2012/07/how-to-draw-bitmaps-using-javascript/

Write Bitmap data to ArrayBuffer

これで準備が出来たので、ArrayBufferにBitmapのヘッダと画像のピクセルデータを書き込んでいきます。

// create buffer var buf = new ArrayBuffer(byteSize + header.length + 4 - (header.length % 4); var data8 = new Uint8Array(buf); var data32 = new Uint32Array(buf); // write header for (var i = 0; i < header.length; i++) { data8[i] = header.charCodeAt(i); } // write image data for (var x = 0, z = Math.ceil(header.length % 4); x < width; x++) { for (var y = 0; y < height; y++) { var i = (width * y) + x; var j = (width * (height - y)) - (width - x) + z; data32[j] = (imageData.data[(i*4)+1] << 24) | (imageData.data[(i*4)+2] << 16) | (imageData.data[(i*4)+3] << 8) | (imageData.data[(i*4)+0]) || -1; } }

注意点としてUint32Arrayを生成するときは4バイト単位の長さにすること。 BitmapとCanvasのピクセルデータでデータではy座標が逆になるという点に気をつけてください。

Convert ArrayBuffer to Blob and Blob URL

最後に作成したArrayBufferをBlobに変換し、そこからBlob URLに変換します。

var b = new Blob([buf, {type: 'image/bmp'}); var url = URL.createObjectURL(b); var img = new Image(); img.src = url; img.onload = function() { URLrevokeObjectURL(img.src); }

URL.createObjectURLで作成できるBlob URLの数は決まっているため、Blob URLを作成したら必ずすぐにURLrevokeObjectURLで解放してあげる必要があります。 きちんと計測した訳ではありませんが200〜400ぐらいでBlob URLの確保に失敗して読み込めないURLが出来始めます。 （URL.createObjectURL自体は成功するので、読み込むまで失敗するかどうかわかりません）

Exceute on worker

これでCanvasからBlob URLへの変換ができましたが、canvas.toDataURLよりもパフォーマンスが悪化しています。 そこで、Workerを使って別スレッドで処理を行います。 ちょうどimageDataがTransferableなオブジェクトのため、Workerに大きなデータを渡してもそこまで遅延せずにデータのやり取りを行えます。

// worker function function canvasToBlob() { self.addEventListener('message', function(event) { // create bitmap ... self.postMessage({buffer: buf}, [buf]); }); } // generate worker var workerFnString = '(' + canvasToBlob.toString() + ')()'; var workerblob = new Blob([workerFnString], {type: 'text/javascript'}); var workerUrl = URL.createObjectURL(workerblob); var worker = new Worker(workerUrl); // revoke url URL.revokeObjectURL(workerUrl); worker.addEventListener('message', function(e) { var b = new Blob([e.data.buffer], {type: 'image/bmp'}); var url = URL.createObjectURL(b); // apply object var img = new Image(); img.src = url; img.onload = function() { URL.revokeObjectURL(img.src); }); }); worker.postMessage({imageData: imageData}, [imageData.data.buffer]);

これでメインスレッドをブロックせずに実行できるようになりました。

※参考サイト http://lab.sonicmoov.com/development/web-workers-with-transferable-objects/

他にもリサイズ処理をWorkerでやったり、同時実行数を制限することでメインスレッドを固めるのを防ぐことができます。 将来的にはWorker上でCanvasを操作できるCanvasProxyや、CanvasからBlobを生成できるtoBlobがきたらもう少しパフォーマンスを良くできると思います。

しかし、まさかJSでBitmapの仕様を調べることになるとは思いませんでした。。。 基本的にブラウザアプリケーションではサーバーサイドでサムネイルを生成するのがベストな選択なので、どうしてもクライアントサイドで生成しないといけない理由がないときはサーバーサイドで生成するようにしてください。

[null-ly]

Node v0.6.12 における Buffer と ArrayBuffer の違い

Node でバイナリ操作とかしたい時だってあるさ。というわけで Node でバイナリ操作をするときに使える Buffer と ArrayBuffer との違いについて簡単にだけど調べてみた。

由来

Buffer オブジェクトは Node v0.1.90 にて CommonJS の Binary/F のいくつかのメソッドを実装する形で登場した。その後、Node における Binary オブジェクトは CommonJS とは独自の発展を遂げる。

一方 ArrayBuffer は Node v0.5.5 にて Plesk というプロジェクトの Typed Array の実装を借用する形で登場した。Typed Array の仕様は WebGL などの仕様と併せて Khronos Group が策定している。

初期化

Buffer は確保したメモリの内容で初期化される。

> var buffer = new Buffer(0x0F); undefined > buffer <Buffer 7d 2c 0a 20 20 47 4c 4f 42 41 4c 3a 20 5b 43> 

ArrayBuffer は \0 で初期化される。

> var arrayBuffer = new ArrayBuffer(0x0F); undefined > arrayBuffer { '0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0, '11': 0, '12': 0, '13': 0, '14': 0, byteLength: 15 }

buffer オブジェクトは予め決められた内容で初期化するか、buffer.fill() で初期化しないとあぶない。

配列のように扱う

Buffer, ArrayBuffer ともに可能だが、バイト長を図る場合 Buffer の場合は length プロパティ、ArrayBuffer の場合は byteLength プロパティを参照しなければいけないので注意が必要。

> buffer[0] 125 > buffer.length 15 > arrayBuffer[0] 0 > arrayBuffer.byteLength 15

Typed Array への変換

ドキュメント化されていないが Node の Buffer からの変換も可能。

> var uint8sFromBuffer = new Uint8Array(buffer); undefined > uint8sFromBuffer { '0': 125, '1': 44, '2': 10, '3': 32, '4': 32, '5': 71, '6': 76, '7': 79, '8': 66, '9': 65, '10': 76, '11': 58, '12': 32, '13': 91, '14': 67, buffer: { '0': 125, '1': 44, '2': 10, '3': 32, '4': 32, '5': 71, '6': 76, '7': 79, '8': 66, '9': 65, '10': 76, '11': 58, '12': 32, '13': 91, '14': 67, byteLength: 15 }, BYTES_PER_ELEMENT: 1, length: 15, set: [Function: set], byteOffset: 0, slice: [Function: slice], byteLength: 15, subarray: [Function: subarray] }

ArrayBuffer についてはもともと Typed Array の仕様の一部なのでもちろん可能。

> var uint8sFromArrayBuffer = new Uint8Array(arrayBuffer); undefined > uint8sFromArrayBuffer { '0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0, '11': 0, '12': 0, '13': 0, '14': 0, buffer: { '0': 0, '1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0, '11': 0, '12': 0, '13': 0, '14': 0, byteLength: 15 }, BYTES_PER_ELEMENT: 1, length: 15, set: [Function: set], byteOffset: 0, slice: [Function: slice], byteLength: 15, subarray: [Function: subarray] }

関連かも

http://nodejs.org/api/buffer.html

http://www.khronos.org/registry/typedarray/specs/latest/

[langweiligeszeug]

ArrayBuffer <-> Blob <-> BinaryString conversion

You can speed up your javascript encryption stuff by using ArrayBuffers. However, if you want to convert it back to a binary string for other API calls, it's really slow. At least if you do it by hand using something like

for(var i=0; i< view.length; ++i) str += String.fromCharCode(view[i]);

Of course you can somewhat improve it by using a stringbuilder approach, like

function convertFaster(view) { var array = new Array(view.length); for(var i=0; i< view.length; ++i) array[i] = String.fromCharCode(view[i]); return array.join(''); }

However, there is a much faster way using the FileReader API. Although its name implies only usage for files, it takes a Blob as an argument. Since every File is also a Blob, this makes it possible to read Files. But this also means, we can feed it with custom blobs. To make use of this we can convert any ArrayBuffer to a blob by using the brand new BlobBuilder

var buffer = new ArrayBuffer(3) var array = new Uint8Array(buffer); var i=0; array[i++] = 0x48; array[i++] = 0x69; array[i++] = 0x21; var blobBuilder = new BlobBuilder(); blobBuilder.append(buffer); buffer = null; var blob = blobBuilder.getBlob(); var fileReader =new FileReader(); fileReader.onload = function (e) { //conversion done }; fileReader.readAsBinaryString(blob);

To convert a binary string to a blob we can again use the BlobBuilder. Append also accept DOMStrings as argument.

if (window.MozBlobBuilder) window.BlobBuilder = MozBlobBuilder; if (window.WebKitBlobBuilder) window.BlobBuilder = WebKitBlobBuilder; function arrayBufferPerformance() { var count=prompt("Size of array in bytes?","5000000"); if(count == null) return; count = parseInt(count); var buffer = new ArrayBuffer(count) var array = new Uint8Array(buffer); var start = (new Date).getTime(); var join = new Array(count); for(var i=0; i<array.length; ++i) join[i] = String.fromCharCode(array[i]); join.join(''); var diff = (new Date).getTime() - start; alert("classical approach: "+diff+"ms"); window.start = (new Date).getTime(); var blobBuilder = new BlobBuilder(); blobBuilder.append(buffer); buffer = null; var blob = blobBuilder.getBlob(); var fileReader =new FileReader(); fileReader.onload = function (e) { var diff = (new Date).getTime() - window.start; alert("arraybuffer approach: "+diff+"ms"); }; fileReader.readAsBinaryString(blob); }

Last but not least a nice performance comparison (ArrayBuffer to BinaryString): click me.

Some results with 5000000 bytes on a Core2Duo 6300:

Firefox 9.0.1: 884ms vs 89ms

Chromium 14.0.835.202: 1886ms vs 101ms

Conclusion: Speedup between 10x and 20x :)