[Flash] Export to Image

• Export to Image

使用PNGEncoder/JPEGEncoder配上bitmapdata可以將Sprite上的顯示物件轉成Image。

For Flash:

編碼可以從這一篇取得[Flash] AS3 Core Library。

package{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.utils.ByteArray;
import flash.display.BitmapData;
import flash.net.FileReference;

import com.xinyu.button.TextButton;
import com.adobe.images.PNGEncoder;

public class EncodeDemo extends Sprite{
private var mainUI:Sprite;
private var printBtn:TextButton;

public function EncodeDemo(){
mainUI = new Sprite();
addChild(mainUI);
mainUI.graphics.lineStyle(5,0x000000,1);
mainUI.graphics.drawCircle(stage.stageWidth/2-25,stage.stageHeight/2-25,50);
mainUI.graphics.endFill();

printBtn = new TextButton(100,20,10,2,0xCCCCCC,"Export to PNG",0x000000);
addChild(printBtn);
printBtn.x = stage.stageWidth/2 - printBtn.width/2;
printBtn.y = stage.stageHeight - 2*printBtn.height;
printBtn.addEventListener(MouseEvent.CLICK, onClicked);
}

private function onClicked(event:MouseEvent):void{
var bmpData:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
bmpData.draw(mainUI);

var pngEncoder:PNGEncoder = new PNGEncoder();
var byteArr:ByteArray = PNGEncoder.encode(bmpData);
var file:FileReference = new FileReference();
file.save(byteArr, "image.png");
}
}
}

For Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#495D7B, #303F4A]" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.graphics.codec.PNGEncoder;
import mx.graphics.codec.JPEGEncoder;
import flash.filesystem.File;

private function initApp():void{
mainUI.graphics.lineStyle(5,0x000000,1);
mainUI.graphics.drawCircle(this.width/2-25,this.height/2-25,50);
mainUI.graphics.endFill();
}

private function onClicked():void{
var bmpData:BitmapData = new BitmapData(mainUI.width, mainUI.height);
bmpData.draw(mainUI);

var pngEncoder:PNGEncoder = new PNGEncoder();
var byteArr:ByteArray = pngEncoder.encode(bmpData);
var file:File = File.desktopDirectory.resolvePath("");
file.save(byteArr,"image.png");
file.clone();
}
]]>
</mx:Script>
<mx:VBox left="10" top="10" right="10" bottom="10" verticalGap="2">
<mx:Panel width="100%" height="220" layout="absolute" title="PNG Encoder">
<mx:UIComponent id="mainUI" width="100%" height="100%" />
</mx:Panel>
<mx:ApplicationControlBar width="100%" height="100%" cornerRadius="0">
<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle" horizontalGap="0">
<mx:Button label="Export to PNG" click="onClicked()"/>
</mx:HBox>
</mx:ApplicationControlBar>
</mx:VBox>
</mx:WindowedApplication>