<需要flash player 10+支持>
通過FileReference獲取選中的圖片,調用它的load方法,將圖片存入到內存中。使用Loader(flash.display.Loader)類的loadBytes方法,加載圖片。
在點擊“加水印”的按鈕時,建立兩個BitmapData,然後裏面分別存放圖片和需要添加的文字,之後將兩個BitmapData轉換爲Bitmap添加至舞臺,再轉成一張新的Bitmap。
保存圖片功能則較爲簡單了,直接使用FileReference的save方法
實現的並不完善,缺少例如:選擇字體大小、顏色、間距等功能,未提供平鋪或是移動文字位置的功能…
示例代碼如下<僅供參考>:
1: <?xml version="1.0" encoding="utf-8"?> 2: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 3: layout="absolute" 4: minWidth="400" minHeight="600" 5: creationComplete="inited()" 6: backgroundColor="#ffffff"> 7: 8: <mx:Style source="theme/vistaremix/vistaremix.css" /> 9: 10: <mx:Script> 11: <![CDATA[ 12: import mx.controls.Alert; 13: import mx.core.UIComponent; 14: import mx.events.PropertyChangeEvent; 15: import mx.graphics.codec.PNGEncoder; 16: 17: private var file:FileReference; 18: private var loader:Loader; 19: 20: private function inited():void 21: { 22: loader = new Loader(); 23: loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderDataCompleteHandler); 24: loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loaderProgressHandler); 25: 26: var ui:UIComponent = new UIComponent; 27: 28: addChild(ui); 29: 30: ui.addChild(loader); 31: 32: loader.visible = false; 33: } 34: 35: private function selectPictureHandler():void 36: { 37: file = new FileReference(); 38: file.addEventListener(Event.SELECT, fileSelectHandler); 39: file.browse(getFileFilterArr()); 40: } 41: 42: private function getFileFilterArr():Array 43: { 44: return [new FileFilter("Images(*.jpg;*.jpeg;*.png;*.gif)", "*.jpg;*.jpeg;*.png;*.gif")]; 45: } 46: 47: private function fileSelectHandler(evt:Event):void 48: { 49: file.removeEventListener(Event.SELECT, fileSelectHandler); 50: file.addEventListener(Event.COMPLETE, fileLoadCompleteHandler); 51: file.load(); 52: 53: filePathTxt.text = file.name; 54: } 55: 56: private function fileLoadCompleteHandler(evt:Event):void 57: { 58: file.removeEventListener(Event.COMPLETE, fileLoadCompleteHandler); 59: loader.loadBytes(file.data); 60: } 61: 62: private function madePictureHandler():void 63: { 64: if (loader.content == null) 65: { 66: Alert.show("請先選擇要處理的圖片","提示"); 67: 68: return; 69: } 70: 71: var ui:UIComponent = new UIComponent(); 72: 73: var txt:TextField=new TextField(); 74: var imgBitmapData:BitmapData = (loader.content as Bitmap).bitmapData.clone(); 75: 76: var format:TextFormat = new TextFormat(); 77: format.size = 22; 78: format.bold = true; 79: format.color=0xcc9900; 80: format.align = TextFormatAlign.CENTER; 81: txt.defaultTextFormat = format; 82: txt.htmlText = contentTxt.text || "形象裝"; 83: txt.width = 170; 84: txt.height = 50; 85: 86: // txt.filters = [getTextGlowFilter()]; 87: 88: var tempBitMapData:BitmapData = new BitmapData(txt.width, txt.height, true, 0x00000000); 89: tempBitMapData.draw(txt); 90: 91: var txtShap:Shape = new Shape(); 92: txtShap.graphics.beginBitmapFill(tempBitMapData); 93: txtShap.graphics.drawRect(0,0, tempBitMapData.width, tempBitMapData.height); 94: txtShap.graphics.endFill(); 95: txtShap.x=(imgBitmapData.width-tempBitMapData.width) / 2; 96: txtShap.y=(imgBitmapData.height-tempBitMapData.height) / 2; 97: // txtShap.alpha = .7; 98: 99: // txtShap.rotation = 45 + 270; 100: 101: ui.addChild(new Bitmap(imgBitmapData)); 102: ui.addChild(txtShap); 103: 104: var newBitmapData:BitmapData = new BitmapData(imgBitmapData.width, imgBitmapData.height, true, 0x00000000); 105: newBitmapData.draw(ui); 106: 107: var newBitmap:Bitmap = new Bitmap(); 108: newBitmap.bitmapData = newBitmapData; 109: 110: previewImg.source = newBitmap; 111: } 112: 113: private function getTextGlowFilter(col:uint=0x000000,blur:Number=2):GlowFilter 114: { 115: var color:uint = col 116: var alpha:Number = 1; 117: var blurX:Number = blur 118: var blurY:Number = blur 119: var strength:Number = 255; 120: var quality:Number = 1 121: return new GlowFilter(color,alpha,blurX,blurY,strength,quality); 122: } 123: 124: private function savePictureHandler():void 125: { 126: if (loader.content == null || previewImg.source == null) 127: { 128: Alert.show("請先選擇要處理的圖片","提示"); 129: 130: return; 131: } 132: 133: var pngenc:PNGEncoder = new PNGEncoder(); 134: 135: var bitmapData:BitmapData = (previewImg.source as Bitmap).bitmapData.clone(); 136: 137: var imgByteArray:ByteArray = pngenc.encode(bitmapData); 138: 139: var _file:FileReference = new FileReference(); 140: _file.addEventListener(Event.COMPLETE, downloadCompleteHandler); 141: _file.save(imgByteArray, "_" + filePathTxt.text); 142: } 143: 144: private function downloadCompleteHandler(evt:Event):void 145: { 146: Alert.show("圖片已保存成功","提示"); 147: } 148: 149: private function loaderDataCompleteHandler(evt:Event):void 150: { 151: var bitmapData:BitmapData = new BitmapData(loader.width, loader.height, true, 0x00FFFFFF); 152: 153: bitmapData.draw(loader.content); 154: 155: var bitmap:Bitmap = new Bitmap(); 156: bitmap.bitmapData = bitmapData; 157: 158: previewImg.source = bitmap; 159: } 160: 161: private function loaderProgressHandler(evt:ProgressEvent):void 162: { 163: var percent:Number = evt.bytesLoaded / evt.bytesTotal; 164: 165: percent *= 100; 166: 167: var msg:String = "正在加載:" + percent + "%"; 168: 169: trace(msg); 170: } 171: 172: ]]> 173: </mx:Script> 174: 175: 176: <mx:VBox width="100%" height="100%" paddingLeft="20" verticalGap="5"> 177: 178: <mx:HBox width="100%" paddingTop="20" horizontalGap="5"> 179: 180: <mx:TextInput id="filePathTxt" width="300" editable="false" /> 181: 182: <mx:Button label="選擇圖片" id="selectBtn" click="selectPictureHandler()" /> 183: 184: </mx:HBox> 185: 186: <mx:HBox width="100%" horizontalGap="5" verticalAlign="top"> 187: 188: <mx:TextArea id="contentTxt" width="300" /> 189: 190: <mx:Button label="加水印" id="madeBtn" click="madePictureHandler()" /> 191: 192: <mx:Button label="保存圖片" id="saveBtn" click="savePictureHandler()" /> 193: 194: </mx:HBox> 195: 196: <mx:Canvas width="350" height="500" id="imgContainer" left="20" top="60" 197: borderColor="#3399cc" borderThickness="1" borderStyle="solid" > 198: 199: <mx:Image id="previewImg" horizontalAlign="0" verticalCenter="0" /> 200: 201: </mx:Canvas> 202: 203: </mx:VBox> 204: 205: </mx:Application>