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_ 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_ 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代码
- var temp_str :String= new String(ExternalInterface.call("winClose",aa));
这里的winClose表明将要调用的JavaScript方法，aa是参数
JavaScript：
Js代码
- function winClose(upData){
- alert(upData);
- return upData;
- }
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