图片上传:SWFUpload 图片上传前预览：使用base64

1 使用SWFUPLOAD 

官方网站：

http://code.google.com/p/swfupload/

本文中使用了SWFUpload_v250_beta_3_core.zip 版中的resize. Demo

2 上传前预览的思路

1》利用SWFUpload本身功能进行上传图片。 

2》在SWFUpload自身的选择图片后， 进行图片缩放。 

3》对缩放后的图片进行缩略图的生成。　

4》对缩略图进行base64编码

5》调用javascript将图片生成在页面上。 

2.1 利用SWFUpload本身功能进行上传图片

<script type="text/javascript" src="../swfupload/swfupload.js"></script>

<script type="text/javascript" src="js/handlers.js"></script>

<script type="text/javascript">

var swfu;

window.onload = function () {

swfu = new SWFUpload({

// Backend Settings

upload_url: "upload.php",

post_params: {"PHPSESSID": "b32nvlm8ctnvgatcnmiqsojgh0"},

// File Upload Settings

file_size_limit : "20 MB",

file_types : "*.jpeg;*.jpg;*.png",

file_types_description : "JPG Images; PNG Image",

file_upload_limit : 0,

// Event Handler Settings - these functions as defined in Handlers.js

// The handlers are not part of SWFUpload but are part of my website and control how

// my website reacts to the SWFUpload events.

swfupload_preload_handler : preLoad,

swfupload_load_failed_handler : loadFailed,

file_queue_error_handler : fileQueueError,

file_dialog_complete_handler : fileDialogComplete,

upload_progress_handler : uploadProgress,

upload_error_handler : uploadError,

upload_success_handler : uploadSuccess,

upload_complete_handler : uploadComplete,

// Button Settings

button_image_url : "images/SmallSpyGlassWithTransperancy_17x18.png",

button_placeholder_id : "spanButtonPlaceholder",

button_width: 180,

button_height: 18,

button_text : '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',

button_text_style : '.button { font-family: Helvetica, Arial, sans-serif; font-size: 12pt; } .buttonSmall { font-size: 10pt; }',

button_text_top_padding: 0,

button_text_left_padding: 18,

button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,

button_cursor: SWFUpload.CURSOR.HAND,

// Flash Settings

flash_url : "../swfupload/swfupload.swf",

flash9_url : "../swfupload/swfupload_fp9.swf",

custom_settings : {

upload_target : "divFileProgressContainer",

thumbnail_height: 400,

thumbnail_width: 400,

thumbnail_quality: 100

},

// Debug Settings

debug: true

});

};

</script>

</head> 

 

2.2 在SWFUpload自身的选择图片后， 进行图片缩放。 

首先下载了SWFUpload开源项目  SWFUpload_v250_beta_3_core， 使用FlashDevelop打开。 

经过程序分析， 找到ImageResizer.as

编辑以下代码：

private function loader_Complete(event:Event):void {

.. 

.. 

                    // Get the image data

                    var bmp:BitmapData = null;

                    // var bmp:BitmapData = Bitmap(loader.content).bitmapData;

                    if (loader.width > this.targetWidth || loader.height > this.targetHeight)

                    {

                         bmp = scaleBitmap(loader.content, this.newWidth, this.newHeight);

                    }

                    else

                    {

                         bmp = Bitmap(loader.content).bitmapData;

                    }

.. 

.. 

} 

// 从上传图片生成指定缩放的小些的图片

     public function scaleBitmap(src: DisplayObject, newWidth: Number, newHeight: Number): BitmapData

          {

               var bmd: BitmapData = null;

               

               bmd = new BitmapData(newWidth, newHeight, true, 0x000000);

               var m: Matrix = new Matrix();        

               m.identity();

               m.createBox(newWidth / src.width, newHeight / src.height);

               bmd.draw(src, m, null, null, null, true);

               

               return bmd;

          }

2.3 对缩放后的图片进行缩略图的生成。

          private function BuildSmallImage(bmp:BitmapData):void {

               // add by liangzhimy 2012.10.9

                         // start ----------------------------------------------

                         var resizedBmp:BitmapData;

                         var smallWidth:int = 100;

                         var smallHeight:int = 100;

                         if (smallWidth < bmp.width || smallHeight < bmp.height)

                         {

                              var matrix1:Matrix = new Matrix();

                              matrix1.identity();

                              matrix1.createBox(smallWidth / bmp.width, smallHeight / bmp.height);

                              resizedBmp = new BitmapData(smallWidth, smallHeight, true, 0x000000);

                              resizedBmp.draw(bmp, matrix1, null, null, null, true);

                              var jpgEncoder:JPGEncoder = new JPGEncoder(100);

                              var bytes1:ByteArray = jpgEncoder.encode(resizedBmp);

                              var str:String = convertAvatartoString(bytes1);

                              ExternalCall.DrawImage(str);

                         }

                         else

                         {

                              var jpgEncoder2:JPGEncoder = new JPGEncoder(100);

                              var bytes2:ByteArray = jpgEncoder2.encode(bmp);

                              var str2:String = convertAvatartoString(bytes2);

                              ExternalCall.DrawImage(str2);

                         }

                         // end ------------------------------------------------

          }

2.4 对缩略图进行base64编码

        

  private static function convertAvatartoString(avatar:ByteArray):String

  {

               var str:String;

               if (avatar != null)

               {

                    str = Base64.encodeByteArray(avatar);

               }

               return str;

  }

2.5 调用javascript将图片生成在页面上

ExternalCall.DrawImage(str2); 

ExternalCall.as 中添加如下函数

          public static function DrawImage(imageBase64:String):void{

               ExternalInterface.call("drawImage", EscapeMessage(imageBase64));

          }

web 页面上添加相应的调用函数：

	function drawImage(imgBase64) {
	// alert(imgBase64);
	var type = "data:image/jpeg;base64,";
	var IMG = document.createElement('IMG');
	IMG.src = type+imgBase64;
	document.getElementById('imgBox').appendChild(IMG);
	} ..  ..

<div class="imgBox" id="imgBox"></div>

3　效果图：

4 关键技术总结

4.1 JAVASCRIPT与ActionScript交互

 这个比较简单，一般都不太会出错，直接用ExternalInterface.call就可以：

  Flex代码：

Js代码  

1. var temp_str :String= new String(ExternalInterface.call("winClose",aa));  

 这里的winClose表明将要调用的JavaScript方法，aa是参数

  JavaScript：

Js代码  

1. function winClose(upData){  
2.     alert(upData);  
3.     return upData;  
4. }  

4.2 base64生成 

var jpgEncoder2:JPGEncoder = new JPGEncoder(100);

var bytes2:ByteArray = jpgEncoder2.encode(bmp);

var str2:String = convertAvatartoString(bytes2);

.. 

.. 

private static function convertAvatartoString(avatar:ByteArray):String

{

               var str:String;

               if (avatar != null)

               {

                    str = Base64.encodeByteArray(avatar);

               }

               return str;

}

4　参考Reference

SWFUpload 官网

http://code.google.com/p/swfupload/

SWFUpload2.5 官方中文文档 

http://www.cnblogs.com/youring2/archive/2012/07/13/2590010.html#startResizedUpload

javascript与ActionScript交互

http://hintcnuie.iteye.com/blog/253972

base64生成 

http://www.cnblogs.com/rialover/archive/2011/11/29/2267549.html

5 代码

主要修攺了 

SWFUpload_v250_beta_3_core/swfupload_fp10

SWFUpload_v250_beta_3_samples/demos/resizedemo