Flash 10. Сжатие изображений на стороне клиента

[haiflive]

Флеш можно сделать прозрачным и поместить над кнопкой видимо (используя z-index или что-то типа, я в верстке не силен). А в чем проблема сделать флеш кнопку?

Да там проблемы с текстом получаются, нужно как-то умудриться определить размер текста и потом задать размер кнопки(хотя может есть параметр у текста высота и длина не сотрел).. так же рисовать эту кнопку нужно.. красиво.. использовать flash студию нельзя, лицензия не позволяет..

Вот накопал на днях:http://pixlr.com/там есть магические 3 буквы: API

Весьма интересно.. хорошоший текстовый редактор, не висячий.. с небольшийм, но достаточным API.. хотя предусмотрен он, что бы использовать его с их сайта.. кажется.

Эх..что-то работа у меня в последнее время навалилась, походу некогда будет расширение писать.. но рабочий пример я всётаки постараюсь дописать, что бы идея была ясна, может кто и допишет когда-нибудь..

[andrew911]

text.textWidth / textHeight

FlexSDK и FlashDevelop бесплатны. Рисовать можно и без флеша - можно нарисовать и встроить картинку или вообще нарисовать программно.

[haiflive]

Ну вот худо бедно написал, с небольшим API
Возможности:
1. Загрузка нескольких изображений
2. Сжатие изображений на стороне клиента(jpeg, есть поддержка png включается огтдельно)
3. Загрузка прочих файлов
4. Прогресс почему-то не работает(opera не поддерживает?), но количество загруженных файлов сообщает.
5. Есть возможность отправить данные с файлом на сервер методом GET
6. Принимает ответ от сервера(строка)

настройки:

Код: Выделить всё

flashvars.max_width = 800; // максимальная ширина изображения
flashvars.max_height = 600; // максимальная высота изображения
flashvars.path = "http://test1.ru/jpegencoder/loadFile.php"; // адрес сервера, куда отправлять изображения
flashvars.buttonSelectText = "Select file"; // надпись на кнопке
flashvars.getParamsString = "name=testname,id=2223"; // параметры для метода GET которые будут присоеденены к URL
flashvars.usePngEncoder = "false"; // сжимать png изображения методом png, в противном случае будут сжаты как jpeg       

Ещё выложу исходники в посте, а то файлы почему-то имеют свойство портиться(не здесь, но нераз встречал)
main.as

package
{
//import imgResizer;
import ButtonInteractivity;

import flash.display.Sprite;
import flash.events.TextEvent;
import flash.text.TextField;
import flash.events.MouseEvent;
import flash.net.FileFilter;
import flash.net.FileReference;
import flash.net.FileReferenceList;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.geom.Rectangle;

import flash.net.URLRequest;
import flash.net.URLRequestHeader;
import flash.net.URLRequestMethod;
import flash.net.URLLoader;
import flash.net.URLVariables;

import flash.events.IOErrorEvent;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.EventDispatcher;

import flash.utils.ByteArray;

import by.blooddy.crypto.image.JPEGEncoder;
import by.blooddy.crypto.image.PNG24Encoder;

import flash.display.LoaderInfo;
import flash.external.ExternalInterface;
import flash.system.Security;

import flash.display.StageAlign;
import flash.display.StageScaleMode;

/**
* ...
* @author HaifLive
*/
public class Main extends Sprite
{
//private var imgR:imgResizer;
private var _MAX_WIDTH : Number = 640;
private var _MAX_HEIGHT : Number = 480;
private var _loaderURL : String = "http://test1.ru/jpegencoder/loadFile.php";
private var _buttonSelectText : String = "Browse files";
private var _getParams : String = "";
private var _fileQueue : uint = 0;
private var _fileQueueIter : uint = 0;
private var _usePngEncoder : Boolean = false;

private var _myFileRefList : FileReferenceList = new FileReferenceList();
private var _imgTypeFilter : FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
private var _otherTypeFilter : FileFilter = new FileFilter("Other files(*)", "*");
private var _buttonSelect : ButtonInteractivity;
//private var _URLloaderList : Array = new Array;

public function Main():void
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

Security.allowDomain("*");

if (stage) {
initParams( );
initDisplay( );
init( );
}
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function initParams ( ) : void
{
var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
if (paramObj.hasOwnProperty('max_width'))
_MAX_WIDTH = paramObj['max_width'];
if (paramObj.hasOwnProperty('max_height'))
_MAX_HEIGHT = paramObj['max_height'];
if (paramObj.hasOwnProperty('path'))
_loaderURL = paramObj['path'];
if (paramObj.hasOwnProperty('buttonSelectText'))
_buttonSelectText = paramObj['buttonSelectText'];
if (paramObj.hasOwnProperty('getParamsString'))
_getParams = paramObj['getParamsString'];
if (paramObj.hasOwnProperty('usePngEncoder'))
{
if (paramObj['usePngEncoder'] == "true")
_usePngEncoder = true;
else
_usePngEncoder = false;
}
//_getParams = "name=testname,id=2223";
if (_getParams != null && _getParams != "")
{
var results:Array = _getParams.split(",");
_getParams = "";
for (var i:uint = 0; i < results.length; i++)
{
_getParams += "&" + results ;
}
}
}

public function initDisplay() : void
{
_buttonSelect = new ButtonInteractivity();
_buttonSelect.setText( _buttonSelectText );
addChild( _buttonSelect );
}

private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point

//if (ExternalInterface.available)
//{
//ExternalInterface.addCallback("JSselectFile", showJSErrorMessage);
//}
_buttonSelect.addEventListener( MouseEvent.CLICK, showWindowSelectFile );
}

private function showWindowSelectFile(event:Event):void
{
_myFileRefList.addEventListener ( Event.SELECT, fileListSelected );
//! не работает в браузере через JavaScript
_myFileRefList.browse( [_imgTypeFilter, _otherTypeFilter] );
}

private function fileListSelected(event:Event):void
{
var file:FileReference;
var files:FileReferenceList = FileReferenceList(event.target);
var selectedFileArray:Array = files.fileList;
_fileQueue = selectedFileArray.length;
for (var i:uint = 0; i < selectedFileArray.length; i++)
{//! нужно запускать загрузку следующего файла по завершении загрузки текущего
file = FileReference(selectedFileArray);
file.addEventListener(Event.COMPLETE, fileLoaded);
file.load ( );
}
}

private function fileLoaded( event:Event ):void
{
var tempFileRef : FileReference = FileReference ( event.target );
JSfileSelected(tempFileRef.name);
if ( _imgTypeFilter.description.indexOf(tempFileRef.type) > 0 )
{// images
var loader:Loader = new Loader ( ) ;
loader.name = tempFileRef.name;
loader.contentLoaderInfo.addEventListener ( Event.COMPLETE, sendImage );
loader.loadBytes ( tempFileRef.data ) ;
}
else
{// other files
loadFileToServer(tempFileRef.data, tempFileRef.name);
}
}

private function sendImage(event:Event):void
{
var bitmap:Bitmap = Bitmap ( event.target.content );
bitmap.smoothing = true;

if ( bitmap.width > _MAX_WIDTH || bitmap.height > _MAX_HEIGHT )
resizeBitmap ( bitmap );

addChild ( bitmap );

var jpgSource:BitmapData = new BitmapData ( bitmap.width, bitmap.height );
jpgSource.draw(this);
removeChild( bitmap );
var imageStream:ByteArray;
if (String(event.currentTarget.loader.name).indexOf("png") > 0 && _usePngEncoder)
imageStream = by.blooddy.crypto.image.PNG24Encoder.encode( jpgSource );
else
imageStream = by.blooddy.crypto.image.JPEGEncoder.encode( jpgSource );
loadFileToServer(imageStream, event.currentTarget.loader.name);
}

private function loadFileToServer( fileStream:ByteArray, filename:String ):void
{
var header:URLRequestHeader = new URLRequestHeader( "Content-type", "application/octet-stream" );
var fileURLRequest:URLRequest = new URLRequest( _loaderURL + "?filename=" + filename + _getParams );
var URLloader:URLLoader = new URLLoader();
//_URLloaderList.push(URLloader);
URLloader.addEventListener( Event.COMPLETE, completeHandler );
URLloader.addEventListener( Event.OPEN, openHandler );
URLloader.addEventListener( ProgressEvent.PROGRESS, progressHandler );
//URLloader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
//URLloader.addEventListener(HTTPStatusEvent.HTTP_STATUS, httpStatusHandler);
URLloader.addEventListener(IOErrorEvent.IO_ERROR, errorSendFile);
fileURLRequest.requestHeaders.push(header);
fileURLRequest.method = URLRequestMethod.POST;
fileURLRequest.data = fileStream;

//loader.addEventListener ( ProgressEvent.PROGRESS, progressHandler ) ;
//navigateToURL(jpgURLRequest, "_blank");

URLloader.load( fileURLRequest );
}

private function completeHandler( event:Event ):void
{
var loader:URLLoader = URLLoader(event.target);
//trace("Answer from server: " + loader.data);
JSfileLoadComplete( loader.data );
//! если ответ не возможно будет парсить, будет вызвано исключение
//var vars:URLVariables = new URLVariables(loader.data);
//trace("The answer is " + vars.answer);

}

private function openHandler( event:Event ):void
{
JSopenURLRequst(event.toString());
}

private function progressHandler( event:ProgressEvent ):void
{
JSsendingFileProgress(event.bytesLoaded, event.bytesTotal);
}

private function errorSendFile(event:IOErrorEvent):void
{
// Unable to load requested document.
showJSErrorMessage("Can not send file." + event);
}

private function resizeBitmap( target:Bitmap ) : void
{
if ( target.height > target.width ) {
target.width = _MAX_WIDTH;
target.scaleY = target.scaleX;
} else if ( target.width >= target.height ) {
target.height = _MAX_HEIGHT;
target.scaleX = target.scaleY;
}
}
/* JavaScript API functions */
private function showJSErrorMessage( msg:String = null ):void
{
trace(msg);
if (ExternalInterface.available)
/*var result:uint = */ExternalInterface.call( "SWFShowErrorMessage", "Error message: " + msg );
}

private function JSfileSelected( name:String ):void
{
trace( "File Selected and loaded" + name );
if (ExternalInterface.available)
ExternalInterface.call( "SWFFileSelectedAndLoaded", name );
}

private function JSopenURLRequst(request:String):void
{
trace("connected to host: " + request);
if (ExternalInterface.available)
ExternalInterface.call( "SWFopenURLRequst", request );
}

private function JSsendingFileProgress(bytesLoaded:uint, bytesTotal:uint):void
{
trace("progressHandler loaded:" + bytesLoaded + " total: " + bytesTotal);
if (ExternalInterface.available)
ExternalInterface.call( "SWFsendigFileProgress", bytesLoaded, bytesTotal );
}

private function JSfileLoadComplete( request:String ):void
{
//for (var i:uint = 0; i < _URLloaderList.length; i++)
//{
//_URLloaderList.close() ;
//}
_fileQueueIter++;
JSAnFileLoaded();
if (_fileQueueIter == _fileQueue)
JSAllFilesLoaded();
//trace( "File sended, request is: " + request );
if (ExternalInterface.available)
ExternalInterface.call( "SWFfileLoadComplete", request );
}

private function JSAllFilesLoaded():void
{
if (ExternalInterface.available)
ExternalInterface.call( "SWFAllFilesLoaded" );
_fileQueueIter = 0;
}

private function JSAnFileLoaded():void
{
if (ExternalInterface.available)
ExternalInterface.call( "SWFAnFileLoaded", _fileQueueIter, _fileQueue);
}
}

}

index.html

Код: Выделить всё

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>BitmapLoader</title>
    <meta name="description" content="" />
    
    <script src="js/swfobject.js"></script>
    <script>
        var flashvars = {
        };
        flashvars.max_width = 800; // максимальная ширина изображения
        flashvars.max_height = 600; // максимальная высота изображения
        flashvars.path = "http://test1.ru/jpegencoder/loadFile.php"; // адрес сервера, куда отправлять изображения
        flashvars.buttonSelectText = "Select file"; // надпись на кнопке
        flashvars.getParamsString = "name=testname,id=2223"; // параметры для метода GET которые будут присоеденены к URL
        flashvars.usePngEncoder = "false"; // сжимать png изображения методом png, в противном случае будут сжаты как jpeg
        var params = {
            menu: "false",
            scale: "noScale",
            allowFullscreen: "true",
            allowScriptAccess: "always",
            bgcolor: "",
            wmode: "direct" // can cause issues with FP settings & webcam
        };
        var attributes = {
            id:"BitmapLoader"
        };
        swfobject.embedSWF(
            "BitmapLoader.swf", 
            "altContent", "80px", "25px", "10.0.0", 
            "expressInstall.swf", 
            flashvars, params, attributes);
    </script>
    <script language="JavaScript"> 
        function SWFShowErrorMessage(msg) 
        {
            alert( "SWF return error message: " + msg );
        }
        
        function SWFFileSelectedAndLoaded(fileName) 
        {
            //alert( "File selected and loaded: " + fileName );
            inputtext.value += " " + fileName;
        }
        
        function SWFopenURLRequst(request)
        {
            //alert(request);
            inputtext.value += " request:" + request;
        }
        
        function SWFsendigFileProgress(bytesLoaded, bytesTotal)
        {
            //alert(bytesLoaded + bytesTotal);
            inputtext.value += " " + " bytesLoaded:" + bytesLoaded + " bytesTotal:" +bytesTotal;
        }
        
        function SWFfileLoadComplete(request)
        {
            //alert(request);
            inputtext.value += " complite:" + request;
        }
        
        function SWFAllFilesLoaded()
        {
            //alert("all files loaded");
            inputtext.value += " fileloaded!" ;
        }
        
        function SWFAnFileLoaded(fileNumber, numberOfFlies)
        {
            //alert("file number " + fileNumber + " of " + numberOfFlies);
            inputtext.value += " " + "file number " + fileNumber + " of " + numberOfFlies;
        }
    </script>
    <style>
        html, body { height:100%; overflow:hidden; }
        body { margin:0; }
    </style>
</head>
<body>
        <div id="altContent">
            <h3>BitmapLoader</h3>
            <p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
        </div><br>
        <textarea rows="10" cols="50" name="inputtext">results:</textarea><br>
        <button onclick="SWFfileLoadComplete('test');">test</button>
</body>
</html>

ButtonInteractivity.as

Код: Выделить всё

package  
{
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.events.MouseEvent;

    public class ButtonInteractivity extends Sprite
    {
        private var button:Sprite = new Sprite();
        private var textLabel:TextField = new TextField();

        public function ButtonInteractivity( x:Number = 0, y:Number = 0)
        {
            textLabel.text = "Browse files";
            drawButton();
            button.addEventListener(MouseEvent.ROLL_OVER, museOverHandler);
            button.addEventListener(MouseEvent.ROLL_OUT, mouseOutHandler);
            addChild(button);
            button.addChild(textLabel);
        }
        
        public function setText(text:String): void
        {
            textLabel.text = text;
            drawButton();
        }

        private function drawButton(color:uint = 0xE3E8EB):void
        {
            //var textLabel:TextField = new TextField()
            button.graphics.clear();
            button.graphics.beginFill(color); // grey color
            button.graphics.drawRoundRect(0, 0, textLabel.textWidth + 20 /*80*/, textLabel.textHeight + 10 /*25*/, 10, 10); // x, y, width, height, ellipseW, ellipseH
            button.graphics.endFill();
            textLabel.x = 8;
            textLabel.y = 4;
            textLabel.selectable = false;
            
            //Add useHandCursor, buttonMode, and mouseChildren if required
            button.useHandCursor = true;
            button.buttonMode = true;
            button.mouseChildren = false;
        }

        private function museOverHandler(event:MouseEvent):void
        {
            drawButton(0xC8E3F6);
        }
        
        private function mouseOutHandler(event:MouseEvent):void
        {
            drawButton();
        }
        
    }

} 

loadFile.php

Код: Выделить всё

<?php

$fp = fopen( mt_rand(0,1000) . $_GET['filename'] , 'wb' );
 fwrite( $fp, $GLOBALS[ 'HTTP_RAW_POST_DATA' ] );
 // fwrite( $fp, "test");
 fclose( $fp );
 echo "test answer: " . $_GET['filename'] . $_GET['id'];
?>