Crop image

[Guest]

Hello developers, I got a question for you guys and girls.

I have  to build a "cropping tool" for a website. The users will have to upload  images to the server and if they want, they can choose to crop it (but  only after the image was uploaded) so I don't need to put an upload in  flash.

The flash will receive a parameter (an image  url) and show it in the flash. Then the user will be able to select it  by "drawing" a rectangle with the mouse. Note that the user can zoom in/out and drag&drop. The drag&drop will be modified to only work when clicking outside the "selectable" area. For now, I deactivated it.

I got the selection sample from http://board.flashkit.com/board/showthread.php?t=812133 and  I tweaked it a bit to limit the selectable area only to a predetermined  surface. I also added a "Select all" which will select all the pixels  in the selectable area.

For example, I select a 320x180 region on the image which  has a 25% zoom applied. I need to have a total of 1280x720 pixels  selected and save those as a new image. I'll be using an ASP.Net handler  to save it on the server.

I think I can do that by  calculating the x and y of the image with the selected area x and y +  width and height, adding to that the zoom ratio. What would be the best  to use in this case? CopyPixels? Or a better way? I would like some highlight on that and how you would do it.

Thanks!

[kglad]

the bitmapdata class has a copyPixels method that accepts a sourceRect that will be your cropping rectangle.  zooming may be problematic because the results will not be satisfactory if a low-resolution bitmap is loaded and zoomed up.

you can use the smoothing property of the bitmapdata class to anti-alias your zoomed image but there's only so much that can be done so zooming 4 fold is likely to yield unsatisfactory results unless the loaded bitmap contains up-scaled data.

[Guest]

As for the zoom, the uploaded pictures will be about 2100x2800 of  size, so I don't think the resolution will be so bad since I won't  permit any zoom in if the zoom is >= 100%.

All right, I've been checking the copyPixels function and I'll be trying something with it.

As for the rectangle I have to pass as parameter into copyPixels, I use sprite.graphics.drawRect(...) so I'll have to try something else since I do not have any Rectangle instance created that I can use.

[kglad]

create a rectangle using:

var r:Rectangle=new Rectangle(your x, your y, your width, your height);

[Guest]

Ya, I thought about using my Sprite parameters to create the rectangle. I can get the X, Y, W and H of my Sprite and simply assign them to the rectangle.

However, I got a question. Since I use a loader to load my image into my stage, I have no BitmapImage to use the copyPixels method. Is there a way to get/cast the loader into a Bitmap?

[kglad]

you're loader's content is a bitmap:

var bmp:Bitmap;

function loadCompleteF(e:Event):void{

bmp=Bitmap(e.target.loader.content);

}

[Guest]

Oh okay. I was thinking of casting it using "new Bitmap(loader)", but in fact it might be simplier to just create my bitmap instance at load. lol thanks!

Also, are you familiar with sending data to a server?

I have this code currently but I'm not sure if it's correct:

jpgStream = jpgEncoder.encode(copieData); // copieData is a BitmapData created with copyPixels

var req:URLRequest = new URLRequest(myHandlerURL);

req.contentType = 'application/octet-stream';
req.method = URLRequestMethod.POST;

req.data = jpgStream;
loader.load(req);

I had to tweak it a bit from a previous programmer and I never used that kind of code so I don't know if it'll work (can't test yet cause I'm not done with the Bitmap manipulations). It should send the Bitmap directly to the server in which I get the Image and save it in the database...

[Guest]

I have a little of difficulties to get the BitmapData.

I know how to create a new Bitmap from a new BitmapData, but how can I get the BitmapData from a Bitmap? That's the question...

EDIT: Finally found how for this and the above

[kglad]

try it.

[Guest]

I tried it and it has probably a problem with the Bitmap... I tried taking the Bitmap with e.target.loader.content inside onImageLoaded, but it prevents all the further scaling and it doesn't show on the stage with addChild(bitmap)... Any idea how I should grab the image while keeping all my pictureHolder scaling? Or if I should add the image directly on the stage and scale it instead of the pictureHolder? Thanks!

EDIT: Nevermind, I found the way to do it, to those who were wondering about it:

function onImageLoaded(e:Event):void
{
zoom_ratio = (0.1 / e.target.width) * 800;
zoom_ratio_precis = (0.02 / e.target.width) * 800;
           
originalBitmapData = e.target.loader.content.bitmapData;
originalBitmap = new Bitmap(originalBitmapData);
           
var w:Number = originalBitmapData.width;
var h:Number = originalBitmapData.height;
           
pictureHolder.addChild(originalBitmap);
addChild(pictureHolder);

setChildIndex(pictureHolder,1);

// Size manipulation of pictureHolder here

}

However, I still can't seem to save the image to my server. It's as if it's not even communicating with it...

Here's the full save function:

var jpgEncoder:JPGEncoder = new JPGEncoder(100);
var jpgStream:ByteArray;

var copieData:BitmapData = new BitmapData(rectangle.width, rectangle.height);
copieData.copyPixels(originalData, rectangle, new Point(0,0));

jpgStream = jpgEncoder.encode(copieData);

// This part is used to get part of the current URL to request another URL

var urlString:String = url;
var urlArray:Array = new Array();

// We remove the "http://" before splitting the URL

// First part is the root (first & second in case of localhost) while last part is the file name
urlString = urlString.substring(urlString.indexOf("/") + 2, urlString.length - 1);
urlArray = urlString.split('/');

var req:URLRequest = new URLRequest();

var pathArray:Array = url.split("/");

// If we found "localhost" in URL, this is the URL:

if (urlArray[0] == "localhost")

{
req = new URLRequest("http://" + urlArray[0] + "/" + urlArray[1] + "/handlers/saveimage.ashx?nodossier=" + nodossier + "&filename=" + pathArray[pathArray.length - 1]);

}

// Else, this is the URL we need:
else

{
req = new URLRequest("http://" + urlArray[0] + "/handlers/saveimage.ashx?nodossier=" + nodossier + "&filename=" + pathArray[pathArray.length - 1]);

}

var loader:Loader = new Loader();

loader.addEventListener(Event.COMPLETE, completeHandler);

req.contentType = 'application/octet-stream';
req.method = URLRequestMethod.POST;

// We put the image into the URL request

req.data = jpgStream;
loader.load(req);