{"id":219,"date":"2016-03-17T12:07:37","date_gmt":"2016-03-17T11:07:37","guid":{"rendered":"http:\/\/davikingcode.com\/blog\/?p=219"},"modified":"2016-03-18T13:24:43","modified_gmt":"2016-03-18T12:24:43","slug":"encoding-bitmapdata-using-as3-worker","status":"publish","type":"post","link":"https:\/\/davikingcode.com\/blog\/encoding-bitmapdata-using-as3-worker\/","title":{"rendered":"Encoding BitmapData using AS3 Worker"},"content":{"rendered":"

Though AS3 Worker<\/a> class is available since a while<\/a>, its introduction on iOS is recent: less than 6 months. With AS3 workers being available everywhere, it’s about time to create small libraries multi-threaded with just a few lines of code!<\/p>\n

If you never played with Worker, you should give a look to this great series of blog post<\/a>.<\/p>\n

There are several ways to create Worker, but if you don’t want to fall in a pitfall<\/a> while using ANEs in your project, I recommend to use them via a loaded SWF.<\/p>\n

So here is a small example making a simple library for encoding bitmap data and save images on disk via a Worker:
\n<\/p>\n

The idea is our Main application is getting several Bitmap<\/em>s from URLs and you want to save them on applicationStorageDirectory<\/em> without an UI lag. Workers enable an efficient way to communicate between them via ByteArray<\/em>. So once we have our Bitmap<\/strong>, we turned it into a shareable<\/strong> (across Workers) ByteArray<\/em> we sent to our ImageWriterWorker. This ByteArray<\/em> is then turned into BitmapData<\/em> for encoding into PNG or JPG depending file extension. And finally we received an other ByteArray<\/em> than we saved on disk!<\/p>\n

Let’s start with our main class, loading a future SWF & creating the worker.<\/p>\n

package {\r\n\r\n\timport flash.display.Bitmap;\r\n\timport flash.display.Loader;\r\n\timport flash.display.Sprite;\r\n\timport flash.events.Event;\r\n\timport flash.net.URLRequest;\r\n\timport flash.system.ApplicationDomain;\r\n\timport flash.system.LoaderContext;\r\n\timport flash.system.MessageChannel;\r\n\timport flash.system.Worker;\r\n\timport flash.system.WorkerDomain;\r\n\timport flash.utils.ByteArray;\r\n\r\n\t[SWF(frameRate = "60", width = "1024", height = "468", backgroundColor = "0xFFFFFF")]\r\n\t\r\n\tpublic class Main extends Sprite {\r\n\t\t\r\n\t\tpublic var worker:Worker;\r\n\t\tpublic var msgChannelMainToImageWriterWorker:MessageChannel;\r\n\t\tpublic var workerByteArrayShared:ByteArray;\r\n\t\t\r\n\t\tpublic function Main() {\r\n\t\t\tsuper();\r\n\t\t\t\r\n\t\t\tvar workerLoader:Loader = new Loader();\r\n\r\n\t\t\t\/\/we specify a loader context for managing SWF loading on iOS.\r\n\t\t\tvar loaderContext:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);\r\n\r\n\t\t\tworkerLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onImageWriterWorkerLoaded);\r\n\t\t\tworkerLoader.load(new URLRequest("workers\/ImageWriterWorker.swf"), loaderContext);\r\n\t\t}\r\n\r\n\t\tprivate function _onImageWriterWorkerLoaded(evt:Event):void {\r\n\t\t\t\r\n\t\t\tevt.target.removeEventListener(Event.COMPLETE, _onImageWriterWorkerLoaded);\r\n\t\t\t\r\n\t\t\tvar workerBytes:ByteArray = evt.target.bytes;\r\n\t\t\tworker = WorkerDomain.current.createWorker(workerBytes, true);\r\n\t\t\t\/\/ we set the latest arguments to true, because we want to be able to save on disk via the Worker.\r\n\t\t\t\r\n\t\t\tmsgChannelMainToImageWriterWorker = Worker.current.createMessageChannel(worker);\r\n\t\t\t\t\r\n\t\t\tworker.setSharedProperty("mainToImageWriterWorker", msgChannelMainToImageWriterWorker);\r\n\r\n\t\t\tworkerByteArrayShared = new ByteArray();\r\n\t\t\tworkerByteArrayShared.shareable = true; \/\/ we share the byte array through the worker\r\n\t\t\tworker.setSharedProperty("imageBytes", workerByteArrayShared);\r\n\t\t\t\r\n\t\t\tworker.start();\r\n\t\t}\r\n\t}\r\n}<\/pre>\n
Now the worker from our library:<\/p>\n
package {\r\n\r\n\timport flash.display.BitmapData;\r\n\timport flash.display.JPEGEncoderOptions;\r\n\timport flash.display.PNGEncoderOptions;\r\n\timport flash.display.Sprite;\r\n\timport flash.events.Event;\r\n\timport flash.filesystem.File;\r\n\timport flash.filesystem.FileMode;\r\n\timport flash.filesystem.FileStream;\r\n\timport flash.system.MessageChannel;\r\n\timport flash.system.Worker;\r\n\timport flash.utils.ByteArray;\r\n\r\n\tpublic class ImageWriterWorker extends Sprite {\r\n\r\n\t\tpublic var msgChannelMainToImageWriterWorker:MessageChannel;\r\n\t\t\r\n\t\tpublic var bytes:ByteArray;\r\n\r\n\t\tpublic function ImageWriterWorker() {\r\n\r\n\t\t\tmsgChannelMainToImageWriterWorker = Worker.current.getSharedProperty("mainToImageWriterWorker");\r\n\t\t\t\r\n\t\t\t\/\/ simple check to remove errors on execution without the main worker\r\n\t\t\tif (msgChannelMainToImageWriterWorker) {\r\n\t\t\t\t\r\n\t\t\t\tmsgChannelMainToImageWriterWorker.addEventListener(Event.CHANNEL_MESSAGE, messageFromMainWorker);\r\n\t\t\t\r\n\t\t\t\tbytes = worker.getSharedProperty("imageBytes");\r\n\t\t\t}\r\n\t\t}\r\n\t\t\r\n\t\tprivate function messageFromMainWorker(evt:Event):void {\r\n\t\t\t\r\n\t\t\tif (msgChannelMainToImageWriterWorker.messageAvailable) {\r\n\t\t\t\t\r\n\t\t\t\t\/\/ we receive an object composed with an image width, height, and a url path.\r\n\t\t\t\tvar obj:Object = msgChannelMainToImageWriterWorker.receive();\r\n\t\t\t\t\r\n\t\t\t\tbytes.position = 0; \/\/ read informations from start.\r\n\r\n\t\t\t\tvar bmpd:BitmapData = new BitmapData(obj.width, obj.height, true, 0xFFFFFF);\r\n\t\t\t\tbmpd.setPixels(bmpd.rect, bytes);\r\n\t\t\t\t\r\n\t\t\t\tvar localFile:File = new File(obj.path);\r\n\t\t\t\t\r\n\t\t\t\tvar extension = obj.path.substring(obj.path.lastIndexOf(".") + 1, obj.path.length);\r\n\t\t\t\tvar bytesEncoded:ByteArray;\r\n\t\t\t\t\r\n\t\t\t\tif (extension == "jpg")\r\n\t\t\t\t\tbytesEncoded = bmpd.encode(bmpd.rect, new JPEGEncoderOptions(70));\r\n\t\t\t\t\r\n\t\t\t\telse if (extension == "png")\r\n\t\t\t\t\tbytesEncoded = bmpd.encode(bmpd.rect, new PNGEncoderOptions(true));\r\n\t\t\t\t\r\n\t\t\t\telse \r\n\t\t\t\t\tthrow "Unknow extension: " + extension;\r\n\t\t\t\t\r\n\t\t\t\tvar stream:FileStream = new FileStream();\r\n\t\t\t\tstream.open(localFile, FileMode.WRITE);\r\n\t\t\t\tstream.writeBytes(bytesEncoded);\r\n\t\t\t\tstream.close();\r\n\r\n\t\t\t\tbytesEncoded.clear();\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}<\/pre>\n
Now let’s communicate from our Main worker to our ImageWriterWorker library:<\/p>\n
private function loader_completeHandler(evt:Event):void {\r\n\r\n\tvar bmp:Bitmap = evt.target.content as Bitmap;\r\n\r\n\tMain.workerByteArrayShared.clear(); \/\/ we don't want the system to get out of memory!\r\n\r\n\tbmp.bitmapData.copyPixelsToByteArray(bmp.bitmapData.rect, Main.workerByteArrayShared);\r\n\r\n\tMain.workerMessageChannelMainToBack.send({width:bmp.width, bmp:bmpd.height, path:File.applicationStorageDirectory.resolvePath("images\/1.jpg").nativePath});\r\n}<\/pre>\n
The ByteArray<\/em> doesn’t need to go through the MessageChannel<\/em> since it is shareable<\/strong>! And finally it’s our main worker which is giving the full path, because if we’re trying to access the applicationStorageDirectory<\/em> from our main thread, we got an unworking path: \/Users\/Aymeric\/Library\/Application Support\/[Worker].null\/Local Store\/images\/1.jpg<\/em>.<\/p>\n
So everything is done? Yeah, it could works fine if we’re downloading pictures etc. but in fact we missed something important: concurrency! If our ImageWriterWorker takes more time to encode than the copyPixelsToByteArray<\/em>, we’re changing the ByteArray before (or even during) the encoding via setPixels<\/em>! We could, in fact, send the ByteArray<\/em> too in the message, but it’s heavy. So we keep the shareable<\/em> property and we implement a queue. The ImageWriterWorker<\/em> will send a message once it has encoded & saved an image so we can proceed the next element in the queue. So let’s implement a message channel from the other side:<\/p>\n
\/\/ Main.as\r\nmsgChannelImageWriterToMainWorker = worker.createMessageChannel(Worker.current);\r\n\r\nmsgChannelImageWriterToMainWorker.addEventListener(Event.CHANNEL_MESSAGE, messagesFromImageWriterWorker);\r\n\r\nworker.setSharedProperty("imageWriterWorkerToMain", msgChannelImageWriterToMainWorker);\r\n\r\npublic function messagesFromImageWriterWorker(evt:Event):void {\r\n\t\r\n\tif (msgChannelImageWriterToMainWorker.messageAvailable) {\r\n\t\t\r\n\t\tif (msgChannelImageWriterToMainWorker.receive() == "IMAGE_SAVED") {\r\n\t\t\t\r\n\t\t\tprocessBitmapQueueToImageWriterWorker();\r\n\t\t}\r\n\t}\r\n}\r\n\r\n\/\/ ImageWriterWorker.as\r\n\r\nmsgChannelImageWriterToMainWorker = Worker.current.getSharedProperty("imageWriterWorkerToMain");\r\n\r\n\/\/ then once the stream for saving the image is done:\r\nmsgChannelImageWriterToMainWorker.send("IMAGE_SAVED");\r\n\r\n\/\/ let's define our queue in an array:\r\nbitmapsToEncode.push([new Image0(), File.applicationStorageDirectory.resolvePath("images\/0.jpg").nativePath]);\r\n\r\npublic function processBitmapQueueToImageWriterWorker():void {\r\n\t\r\n\tif (bitmapsToEncode.length < 1) {\r\n\t\ttrace("queue finished");\r\n\t\treturn;\r\n\t}\r\n\t\r\n\tvar tab:Array = bitmapsToEncode.shift();\r\n\t\r\n\tvar bitmap:Bitmap = tab[0];\r\n\t\r\n\tworkerByteArrayShared.clear();\r\n\t\r\n\tbitmap.bitmapData.copyPixelsToByteArray(bitmap.bitmapData.rect, workerByteArrayShared);\r\n\t\t\t\r\n\tmsgChannelMainToImageWriterWorker.send({width:bitmap.width, height:bitmap.height, path:tab[1]});\r\n}<\/pre>\n
That’s it! You can download the code<\/a>.<\/p>\n
A cross platform Worker class was one of the latest cog needed for the AS3 platform! Yeah, but since the UI is on the main thread, we can’t upload our texture on the GPU without freezing…<\/em>? Correct. But Adobe is working on the ultimate cog, an asynchronous upload for textures! Keep the faith \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"
Though AS3 Worker class is available since a while, its introduction on iOS is recent: less than 6 months. With AS3 workers being available everywhere, it’s about time to create small libraries multi-threaded with just a few lines of code! If you never played with Worker, you should give a look to this great series … Continue reading Encoding BitmapData using AS3 Worker<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_discordance_state":"","_discordance_checked":true},"categories":[15],"tags":[8,22,23],"_links":{"self":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/219"}],"collection":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/comments?post=219"}],"version-history":[{"count":18,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/219\/revisions"}],"predecessor-version":[{"id":238,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/posts\/219\/revisions\/238"}],"wp:attachment":[{"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/media?parent=219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/categories?post=219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/davikingcode.com\/blog\/wp-json\/wp\/v2\/tags?post=219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}