Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Ria Ria Document Transcript

  • Image Manipulation in Flex | InsideRIA O’Reilly: O’REILLY MEDIA Inside RIA Search InsideRIA OReilly HOME > TAG CLOUD Image Manipulation in Flex actionscript adobe air Andrew Alderson ajax design development March 13, 2008 | Permalink | Comments (46) flash flex javascript print | listen ria ria roundup silverlight It seems that the number one request I get for development work is creating applications that do image manipulation or vector drawing or a combination of the two. This article is INSIDERIA CONFERENCE about my experiences in building applications in Flex to manipulate images. It will cover the basics of loading an image, saving a reference to it, adjusting color, applying pixel effects, changing its dimensions and orientation and ultimately saving these changes. The aim of this article is not to provide production ready solutions but instead to provide ideas for implementing image manipulation solutions in Flex. Loading image data The first thing you need to know about loading images into the Flash Player is the limits the Player has with respect to the maximum size of display objects and the maximum size of bitmap data. Currently the Flash Player has a hard coded limit as to the size of bitmap data POLL: GOOGLE WAVE you can create in the Flash Player (Flash Player 9 and earlier. I am hoping these limits are removed in Flash Player 10). If you create a new BitmapData object in ActionScript it cannot What are you most curious about with Google Wave? exceed a size of 2880 x 2880. These values are hard coded into the Flash Player and will result in an ‘Invalid BitmapData’ exception if they are exceeded. Vote | View Poll Results | Read Related Blog Entry For display objects there are no hard coded values (that I have been able to determine) but LATEST FEATURES through testing I have discovered that if a display object exceeds 8191 x 8191 it won’t be rendered. This also applies to the dimensions of images being loaded. If the dimensions of Writing the Pac-Man Game the image exceed this size it will load but it will not be rendered on the display list. So in JavaFX - Part 5 theoretically you can load an image that is up to 8191 x 8191 but if you plan on accessing its Haining Henry Zhang bitmap data it can’t exceed 2880 x 2880. More on this below. One thing to keep in mind is Haining Henry Zhang with James that these limits (in the case of BitmapData anyways.) are related to memory allocation so L. Weaver Previous parts in the the larger the image you load the more memory you will consume. Ultimately you are going Pac-Man series Writing the Pac- to want to either limit the size of the image a user can load or scale the image down in your Man Game in JavaFX - Part 1 application so let’s look at this now. Writing the Pac-Man Game in JavaFX - Part 2 Writing the Pac- For simple projects you could just load the image into an image tag and manipulate it. For Man Game in JavaFX - Part 3... more complex applications that require functionality like zoom, pan, multiple copies of same Continue Reading image ( for example a thumbnail and full size version) or non destructive editing a better strategy is to load the image with a Loader and store the bitmap data of the image in a 1 2 3 4 variable. You can then use this data to create multiple bitmaps and apply different manipulations to each. This will greatly decrease the amount of memory used and create a PODCASTS & SCREENCASTS faster more responsive application. The Weekly RIA RoundUp for April 20 In the sample code below you will see how to load an image with the Loader class and store the bitmap data in a variable, scaling it down if necessary. Flash Catalyst Beta 1 [Top Branch Demo Part 2] private var original:BitmapData; private static const MAX_WIDTH:uint = 2880; private static var MAX_HEIGHT:uint = 2880; DEVELOPMENT SERIES Get an overview of the tools and private function loadImage(url:String):voidhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA technologies that work together to { var request:URLRequest = new URLRequest(url); allow developers to build Rich Internet Applications (RIAs) quickly and easily. var imageLoader:Loader = new Loader(); imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, Facebook Application image_completeHandler); // add other listeners here Development imageLoader.load(request) } Anatomy of an Enterprise Flex RIA private function image_completeHandler(event:Event):void NEWS & EVENTS { var bmd:BitmapData = Bitmap(event.currentTarget.content).bitmapData; New Poll: What Are You Most Curious About within Google Wave? var originalWidth:Number = bmd.width; var originalHeight:Number = bmd.height; Poll Results: Do you currently develop var newWidth:Number = originalWidth; your RIA applications for var newHeight:Number = originalHeight; accessibility? var m:Matrix = new Matrix(); Flash On Tap: Beer + Flash + People var scaleX:Number = 1; = Success var scaleY:Number = 1; Read more News & Events if (originalWidth > MAX_WIDTH || originalHeight > MAX_HEIGHT) { RECOMMENDED FOR YOU sx = MAX_WIDTH / originalWidth; sy = MAX_HEIGHT / originalHeight; var scale:Number = Math.min(sx, sy); newWidth = originalWidth * scale; newHeight = originalHeight * scale; @INSIDERIA ON TWITTER } m.scale(scale, scale); original = new BitmapData( newWidth, , newHeight); Writing the Pac-Man Game in JavaFX - Part 5 original.draw(bmd, m); http://tinyurl.com/n98k7f 1 day ago How much is too much? Let’s walk through the code. http://tinyurl.com/kkpb3j 2 days ago We first create a variable to store the bitmap data of the image that we are loading. We then create 2 constants for the maximum width and height this bitmap data can be. Union Platform - Interview with Colin Moock In the loadImage method we take the url of the image as a parameter, create a new http://tinyurl.com/laue2l 4 days ago URLRequest object with it. We then create a new Loader and attach an event listener to its complete event (other listeners can be added but we are only interested in this event right Follow InsideRIA on Twitter now). We then call the load method of the loader with the URLRequest as its parameter. BOOK EXCERPTS In the event handler we need to access the content property of the loader instance that Adobe AIR 1.5 Cookbook loaded the image. The content in this case is a Bitmap object. Within a Bitmap there is a property called bitmapData which contains an array of pixel data for this Bitmap. This data is ActionScript 3.0 an instance of the BitmapData class. Cookbook Programming Flex 3 Once we have a reference to the bitmapData we can check its dimensions and if they Find more book excerpts exceed our maximum size we can draw it to a new bitmapData object at a new size. To accomplish this we get the amount we need to scale and create a new BitmapData object at ARCHIVES this new size. We then use the draw method of the BitmapData class to draw the loaded image to the new BitmapData object and use a matrix to provide the new scale. This Select a month... Select a month... BitmapData can now be stored in a variable and used to create as many bitmaps you need each with its own transformations. The transformations applied to you bitmaps don’t affect Select an author... Select an author... the original BitmapData so you can always use it as a reference. Now that we have a bitmap data instance that we can use let’s do something with it. Or, visit our complete archive. Adjusting Color ABOUT THIS SITE One of the things that you are probably going to want to do when manipulating an image is Welcome to the premiere community site for all things RIA sponsored by adjust its color. Within the Flash Player API’s there are a number of ways to do this but no OReilly Media and Adobe Systems matter which you choose what you are basically doing is changing the red, green and blue Incorporated. (and possibly alpha) values of the image. The two main ways to change the values is to either use a ColorTransform or a ColorMatrixFilter. Let’s look at each and how they differ About Ushttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA and when to use each. Meet Our Contributors Send Us Feedback Using ColorTransform ColorTransform universally adjust the values of the red, green and blue channels of a display object . Depending on whether you are manipulating a bitmap or a display object the color transform is applied differently. For a display object it is a property of the transform object. For bitmaps it is passed as a parameter to the colorTransform method. To adjust the color you either create a new instance of ColorTransform or get a reference to an existing one and change the red, green and blue values and/or offsets. Adjusting brightness with a ColorTransform: *to adjust brightness you change the offsets of the red, green, and blue channels equally var ct:ColorTransform = new ColorTransform(); ct.redOffset = value; ct.blueOffset = value; ct.greenOffset = value; image.transform.colorTransform = ct; // apply the transform to a display object Using ColorMatrixFilter The ColorMatrix filter uses a 4 x 5 matirx to adjust the values. Unlike the ColorTransform which universally adjusts the red, green and blue channels, the ColorMatrixFilter adjusts each pixel. The speed of the ColorMatrixFilter is proportional to the size of the image (the number of pixels to change). Adjusting brightness with a ColorMatrixFilter: var cmf:ColorMatrixFilter = new ColorMatrixFilter( [ red, green, blue,0, 0, red, green, blue, 0, 0, red,green, blue, 0, 0, 0, 0, 0, 1, 0 ]); var filtersArray:Array = new Array(); filtersArray.push(cmf); image.filters = filtersArray; or var matrix:Array = new Array(); matrix = matrix.concat([1, 0, 0, 0, value]); // red matrix = matrix.concat([0, 1, 0, 0, value]); // green matrix = matrix.concat([0, 0, 1, 0, value]); // blue matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha var cmf:ColorMatrixFilter = new ColorMatrixFilter(matrix); var filtersArray:Array = new Array(); filtersArray.push(cmf); image.filters = filtersArray; No matter which you choose you have to remember that each pixel is broken down into its red, green, blue and alpha channels and the range for each channel is 0 to 255. Any values less than 0 will be set to 0 (0x00) and any values greater than 255 will be set to 255 (0xFF). With each of them you can apply multiple effects simultaneously but it is difficult to undo incremental changes made by concatenating multiple ColorTransform objects together. If you use the filter approach undoing one of your effects is as easy as removing it from the filters array and reapplying the array to the display object. With the filter approach you can also apply multiple filters by pushing each of them into the filters array and turning them off by removing them but the filter approach is slower if you have a larger image. More information on the differences can be found in the Flex documentation.http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA More examples of adjusting color *Note - there are different formulas that can be used to calculate the values and offsets for these. The ones used here were taken from the Actionscript 3 Cookbook by Joey Lott, Darron Schall and Keith Peters. Contrast You adjust brightness by either scaling or offsetting the color values. You change contrast by changing both with all the values being equal and all of the offsets being equal. *value is a number between 0 and 1 var a:Number = value * 11; var b:Number = 63.5 - (value * 698.5); redValue = greenValue = blueValue = a; redOffset = greenOffset = blueOffset = b; var cmf:ColorMatrixFilter = new ColorMatrixFilter(a, 0, 0, 0, b, 0, a, 0, 0, b, 0, 0, a, 0, b, 0, 0, 0, 1, 0); Saturation These are the constants for the luminance contrasts for the red, green and blue channels var red:Number = 0.3086; // luminance contrast value for red var green:Number = 0.694; // luminance contrast value for green var blue:Number = 0.0820; // luminance contrast value for blue var a:Number = (1-value) * red + value; var b:Number = (1-value) * green; var c:Number = (1-value) * blue; var d:Number = (1-value) * red; var e:Number = (1-value) * green + value; var f:Number = (1-value) * blue; var g:Number = (1-value) * red ; var h:Number = (1-value) * green; var i:Number = (1-value) * blue + value; var cmf:ColorMatrixFilter = new ColorMatrixFilter(a, b, c, 0, 0, d, e, f, 0, 0, g, h, i, 0 ,0, 0, 0, 0, 1, 0); Grey Scale Apply a grey scale effect by red, green and blue values to their luminance contrast values. var red:Number = 0.3086; // luminance contrast value for red var green:Number = 0.694; // luminance contrast value for green var blue:Number = 0.0820; // luminance contrast value for blue var cmf:ColorMatrixFilter = new ColorMatrixFilter(red, green, blue, 0, 0, red, green, blue, 0, 0, red, green, blue, 0, 0, 0, 0, 0, 1, 0); Negative Apply a negative effect by reversing the values of the matrix var cmf:ColorMatrixFilter = new ColorMatrixFilter(-1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0); Applying Effects Unlike other aspects of image manipulation there is really only one way to apply effects to your images, a ConvolutionFilter. Like the ColorMatrixFilter, the ConvolutionFilter also uses a matrix to change the image but in this case the matrix can be any size. There are a number of factors that affect performance and they are outlined in the Flex documentation. The most common matrix you will use is a 3x3 matrix. Applying effects is basically the same as applying color effects - you create a filter and add it to the filters array of the display object. Here are some common filters (the first two parameters are the dimensions of the matrix and the third is the matrix). *the values I am using here are also taken from the Actionscript 3 cookbookhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA Embossing Use a negative value in the center and opposite values on each side. var emboss:ConvolutionFilter = new ConvolutionFilter(3, 3, [-2, -1, 0, -1, 1, 1, 0, 1, 2]) Edge Detection Use a negative value in the center with symmetrical surrounding values var edge:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, 1, 0, 1, - 3, 1, ,0, 1, 0]) You can change the center value (-3) to apply more or less of an effect. The smaller the number the more of an effect is applied. Sharpening This is the opposite of the Edge Detection matrix - a positive value in the center with symmetrical negative values var sharpen:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, -1, 0, -1, 5, -1, 0, -1, 0]); The larger the center value the less drastic the effect. There are other parameters and properties of the ConvolutionFilter that can give some very interesting effects so I encourage you to experiment with them. Rotating and Flipping Like color adjustments there are different ways to rotate and/ or flip (mirror) an image in the Flash Player. The first way would be to simply change the rotation, scaleX, and scaleY properties of the display object. This may be fine for simple applications but for more complex applications you will want to use a matrix to manipulate these properties. As noted in the in the Adjusting Color section, each display object has a property called ‘transform’ which contains all of the transformations applied to the display object. The ‘matrix’ property is used to move, rotate, scale and skew the display object. As an example let’s scale the image to twice its original size. To use the matrix to make changes you get a reference to the matrix (you can’t change the matrix directly) var m:Matrix = image.transform.matrix; //make your changes (scale it in the x and y direction by a factor of 2) m.scale(2, 2); //and reapply the matrix to the display object image.transform.matrix = m; One thing of note - If you get a reference to the matrix and then make changes all of your changes will be applied onto any changes that have already been applied. In other words they are applied incrementally. As an example if the matrix for the display object already has a rotation of 30 and you apply a rotation of 10 the result will be a rotation of 40.If this is not your desired effect you can simply create a new Matrix and apply it instead of referencing the matrix that already exists. The other reason a matrix is the better choice is that you can pass it as a parameter in bitmapData.draw. This allows you to make multiple changes and then using you originalhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA bitmap data you can draw a new image with all of these transformations. If you look at the example under ‘Loading image data’ you will see we used a matrix to scale the image down after it was loaded. Rotating To use a matrix to rotate an image you either create a new Matrix with appropriate parameters var q:Number = 30 * Math.PI / 180 // 30 degrees in radians var m:Matrix = new Matrix(Math.cos(q), Math.sin(q), -1 * Math.sin(q), Math.cos(q)); //or as a shortcut use the rotate method var m:Matrix = new Matrix(); m.rotate(q) ; When you rotate something in the Flash Player it will rotate around its registration point. This by default is the top left corner. If you want to rotate it around a different point you will need to offset it in the negative direction, do the rotation and then put it back where it was. var m:Matrix = new Matrix(); // rotate around the center of the image var centerX:Number = image.width / 2; var centerY:Number = image.height /2; m.translate(-1 * centerX, -1 * centerY); m.rotate(q); m.translate(centerX, centrerY); Flipping To flip and image is a 2 step process. The first step is to multiply the current scaleX and/or scaleY by -1 and the second is to adjust the x and y position. When you flip and image the registration point does not change and its drawn in the opposite direction. To compensate you will need to change the x position by its width and its y position by its height. var m:Matrix = new Matrix(); m.scale(-1, 0); // flip horizontal assuming that scaleX is currently 1 m.translate(image.width, 0); // move its x position by its width to put it in the upper left corner again Cropping, Panning and Zooming Like everything else we have looked at, there are different ways to change the area of an image that you see. You could change the x, y, width and height properties on the display object or a Rectangle to mark out the pixels you want to see. There are a few reasons that changing the size of the display object is not the best solution. If the user zooms in enough to make the display object larger than 8191 x 8191 it simply will no longer be rendered. Also if you are applying filters with a matrix the new value of each pixel needs to be calculated which can have dire consequences on performance. You only want to apply you filters to the pixels that the user actually sees. The better approach is to redraw the area of the image that the user wants to see using bitmapData.draw and a matrix.http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA Since you are storing a reference to the original bitmap data of the image you can use a Rectangle to draw any area of that data onto a new bitmap and then use a matrix to scale it to fit the area of the screen it is displayed in. When you first load the image you set the rectangle to the dimensions of the original bitmap data and store it in an instance variable var zoomArea:Rectangle zoomArea = original.rect // rect is a property of bitmapData containing the rectangle of the data The properties of zoomArea can be updating if you want to zoom in or out or pan the image around. The rectangle can then be used to draw an area of the original bitmapData onto a new bitmap. To pan the image around you can adjust the left and top position of the rectangle through its offset property. zoomArea.offset(panX, panY); To zoom in or out you adjust the size of the rectangle zoomArea.inflate(newWidth, newHeight); Once you have made the adjustments you can then draw a new bitmapData with the dimensions of zoomArea using the copyPixels method of the bitmapData class. The copyPixels method takes a rectangle as the second parameter. var newBitmapData:BitmapData = new BitmapData(zoomArea.width, zoomArea.height) newBitmapData.copyPixels(original, zoomArea, new Point(0, 0)); The copyPixles method is a fast way to copy bitmap data but it will reset any transformations you have made so these all need to be replied. You could also use the rectangle as the clipRect parameter of the bitmapData.draw method. Printing and Encoding Once your user has made all of these changes they are probably going to want to print or save them. The Flex 3 SDK now contains a great way to capture these changes. In the mx.graphics package there is a class called ImageSnapshot and this can be used to capture the bitmapData of you image to print or create a jpeg or png to save. You can event use it to encode a byte stream to send to the server. I am not going to go too deeply into this but will mention that if you used a matrix to draw your bitmap then the resolution will now be at screen resolution regardless of what the dpi was before it was loaded. If you simply send the display object to the printer from the stage it will probably appear pixelatted. You will want to capture the display object with the ImageSnapshot.captureImage and scale it up to about 300 dpi to get a crisper image. Where to go from here Image manipulation is a broad subject and there are a lot of different approaches you can take. It really comes down to the project requirements. I hope this article gave you some insight into the different approaches you can take. For maximum speed and performance inhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA your application you should familiarize yourself with the Flash Player APIs mentioned in this article. They include Loader, Bitmap, BitmapData, Matrix, Rectangle, Math, ImageSnapshot, JPEGEncoder, PNGEncoder, PrintJob, FlexPrintJob and all of the bitmap filters. Read more from Andrew Alderson. comments: 46 tags: bitmaps flex vector images COMMENTS 46 Comments Subscribe to comments. luca mezzalira said: Thats so interesting because Im working on an AIR project where user could manipulate images with this apps. An interesting thing that you could share your experience is how to create a preview with jpegencoder image to allow user to try any quality to optimaze image. Do you have any suggestions or experience? Thank you in advance March 13, 2008 11:55 AM martin said: would be great if I could get Flex to actually load an image so I could follow this article -"A conflict exists with inherited definition mx.core:Application.url in namespace public." - anybody elese seen this problem? March 13, 2008 4:38 PM Andrew Alderson said: martin: That error is generated whenever you declare a variable in a sub class that has the same name as one inherited from a super class. Application already has a variable named url that is public so you cant create another one in any class that extends Application. Renaming your variable will fix the problem. March 13, 2008 7:14 PM Andrew Alderson said: luca: I am not sure how you plan on implementing this and I have personally not done this yet but it wouldnt be too difficult to implement. JPEGEncoders encode method returns a ByteArray and Loader has a method called loadBytes. Using the Loader to load the ByteArray generated by the JPEGEncoder would be no different that loading an image from the server. Just use loadBytes instead of load. You could use the ImageSnapshot class to get the bitmapData of a display object to pass the the JPEGEncoder. March 13, 2008 7:38 PM Arunava said: Thanks for such a great article. However I would like to know whether it is possible to upload the image data to a server after resizing? What I want to do is : 1. Browse for an image present in the local system.http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA 2. Apply some transformation, so as to reduce its file size (which can be accomplished by reducing its dimensions) 3. Then upload the same to the server. Please suggest. March 13, 2008 10:23 PM luca mezzalira said: Hi Andrew, thank you so much for your reply. Ill try to implement it :D March 14, 2008 1:22 AM Grant Davies said: Nice work Budda :) March 14, 2008 8:06 AM Andrew Alderson said: Arunava: You cant simply upload the same image. The image now exists as a bitmap in the Flash Player and is no longer a jpeg or png. You would need to create a new jpeg with the JPEGEncoder and upload that.The JPEG encoder returns a jpeg encoded ByteArray so when you upload that you can either store it in database directly or use a server side script to create an image from it and either store that on the server or download it back to the client. March 14, 2008 8:44 AM Chris Turvey said: Very nice article on bitmaps editing. I am looking forward to one that has a little more vector specific stuff. I have looked at the drawing API quite a bit... and though what I have read gets the job done, very little of my code for drawing tools are elegant as the above code and descriptions you have written. --Chris March 14, 2008 9:29 PM Varun Shetty said: nice information... i am curious about the contrast formula that is used... i tried to google around.. couldnt get one.. March 15, 2008 7:27 PM Arunava said: Hi Andrew, Thank you very much for the reply. I will definitely try to implement what you said. One more request, if by any chance you have any sample coding for the same or any url demonstrating it, please post it. Thanks once again March 16, 2008 12:21 AM r00z said: I think there is one small mistake in Flipping section: m.scale(-1, 0);http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA after this call image.height will be 0. Use: m.scale(-1, 1); March 21, 2008 5:07 AM Jeff B said: How can I implement a tool to have photo smudging? I would like to have a kid friendly tool to manipulate photos with limit capability. March 24, 2008 11:09 AM Tiago Torre do Vale said: Is it possible to load a image from the filesystem? March 25, 2008 2:32 PM azee said: Is it possible to use ImageSnapshot.captureImage and resize the captured UIComponent before sending it to the server for downloading, without actually resizing it on the screen? In other words, I want to give the user an option for saving a chart on the screen in different sizes. March 30, 2008 6:00 AM todd said: Does anybody know how to merge to or more images into one and then download it to the users desktop??? Thanks Todd March 30, 2008 9:06 PM Russell Evanson said: Does anyone know how to scale all contents of an application according to the users screen resolution? My colleague has already tried a technique which re-scales the whole screen, but the problem with this is that all the contents become out of proportion. Is there any other way? Please email me at russellevanson@innovate-software.co.uk Many thanks. May 13, 2008 6:01 AM Gareth said: @rooz, Thanks for the comment. I had been trying to get my image to flip correctly for the last 3 hours thinking my code was throwing some weirdness into the mix. Simply changing it from 0 to 1 as you suggested fixed the "flip" issue. May 15, 2008 12:47 PM $L@T3R said: What about if the image is rotated at some angle and then need to flip vertical or horizontal by center? May 28, 2008 2:46 AM Jaibabu said: Hai Andrew Alderson, I had followed your guidance for image manipulation. The main part i have to do is i want tohttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA save the captured image in server side Using Java JAI. I had tried many solutions but i failed to achieve that. I can able to send the JpegEncoded byte array as string (Using Base64Decode) to the server side. But in server side i cant able to convert the encoded string to image format using Java JAI. Can you please send me the java code to save the captured image. When i save the String as jpeg image in server side the file gets saved but no image is visible. Thanks Jaibabu July 16, 2008 12:11 AM Flashgen said: Hi, I have a project where i would like to save the image in 300dpi. i havent implemented your code yet. Don.t you think that scaling the image upto 300 dpi will effect the quality specially in a case where i am looking for a very high print quality. It would be great for me if you can reply back to this question Regards flashgen July 18, 2008 8:40 AM Jed said: I went through the loader example yesterday and found a couple of things that did not work in Actionscript 3, I dont know if this was written in 2 or 3, but I had a couple of errors thrown with the posted code. First, because I was only loading into memory and not displaying the image in some mxml component, i instantiated a private bindable variable type BitmapData outside the functions. Second, in the load complete handler function I had a dickens of a time getting the loaded data to get assigned to the local bitmapData variable. Your dot notation syntax did not work. Here is how I ended up doing it. var bitMap:Bitmap = new Bitmap(event.currentTarget.content.bitmapData); var bmd:BitmapData = bitMap.bitmapData; The flex compiler did not allow me to do the type coercion that you posted in your example. Then I assigned the variable back to the module scope bitmapData variable (I called it image): image = new BitmapData(bitMap.width, bitMap.height, true); image.draw(bitMap); August 15, 2008 5:55 AM Vitalik said: Hi all ... i have a big problem i must dinamicaly load an image ... how i do that .. image.source = "http://ispot.interlogic.com.ua/Content/Upload/Kunstindustrimuseets Café.jpg"; but its not load the image becouse there are danish character in URI is = "é" in word = "Café" what i must to do that to load this image ... October 28, 2008 10:25 AM Anonymous said: urlencode is the magic! November 7, 2008 4:02 AMhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA randygland said: regarding the initial code which creates the bitmap data, how would you then add that to the display? I tried creating a bitmap from the original bitmap data and adding the new bitmap as a child of a canvas component, but i get the following error: Type Coercion failed: cannot convert flash.display::Bitmap@67c02e1 to mx.core.IUIComponent. November 25, 2008 3:17 AM Andrew Alderson said: Hi Randy, You cant add a Bitmap directly to a Canvas container in Flex. All children of a Canvas must implement IUIComponent which Bitmap doesnt. You would need to put the bitmap into an Image control by setting the source property of it to the bitmap. eg: var image:Image = new Image(); image.source = myBitmap; November 25, 2008 6:23 AM randygland said: Cool man, cheers... You got some issues with parsing non Arrays into the ColorMatrixFilter constructor.. but otherwise, spot on! cheers! :D November 26, 2008 3:20 AM strangepeer said: i was searching from a long time how to do the manipulation of image in flex and at last i hit this site and this page in google . this is cool .......... December 2, 2008 11:30 PM jason olmsted said: @Randy, Andrew is right about the UIComponent limitation, but you dont have to use an Image instance. Instead, you can choose to just use the UIComponent itself. I wrote a quick blog piece on how to apply actionscript drawing examples with Flex that might be helpful; http://blog.shortfusion.com/index.cfm/2008/11/30/UIComponent-Instead-of- Sprite--Blending-is-Fun December 8, 2008 12:32 PM jason olmsted said: @Randy, Andrew is right about the UIComponent limitation, but you dont have to use an Image instance. Instead, you can choose to just use the UIComponent itself. I wrote a quick blog piece on how to apply actionscript drawing examples to Flex that might be helpful; http://blog.shortfusion.com/index.cfm/2008/11/30/UIComponent-Instead-of-Sprite-- Blending-is-Fun December 8, 2008 12:33 PM Keystr0k said: Can anyone post an example of exactly how to display an image on the screen? I have read the comments but am still unsure of how to do this. I must be missing something.http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA December 14, 2008 9:49 AM Hissam said: I liked it, this is what I was searching for one thing to add Im zooming/resizing an image on an canvas but while zooming/resizing the zooming icons (those cross icons used ) goes out of the canvas n I land up loss of those icons Can u give code / logic so that I stay inside the canvas/container while resizing?? December 19, 2008 9:54 AM Rajashekhar said: Hi to all, How to get the text from image. January 18, 2009 10:19 PM Allen said: Good stuff Andrew! There seems to be an error with the contract example: var a:Number = value * 11; var b:Number = 63.5 - (value * 698.5); redValue = greenValue = blueValue = a; redOffset = greenOffset = blueOffset = b; var cmf:ColorMatrixFilter = new ColorMatrixFilter(a, 0, 0, 0, b, 0, a, 0, 0, b, 0, 0, a, 0, b, 0, 0, 0, 1, 0); specifically: redValue = greenValue = blueValue = a; redOffset = greenOffset = blueOffset = b; Thanks! February 5, 2009 9:29 PM Billy said: Good stuff Andrew! There seems to be an error with your Contrast example: var a:Number = value * 11; var b:Number = 63.5 - (value * 698.5); redValue = greenValue = blueValue = a; redOffset = greenOffset = blueOffset = b; var cmf:ColorMatrixFilter = new ColorMatrixFilter(a, 0, 0, 0, b, 0, a, 0, 0, b, 0, 0, a, 0, b, 0, 0, 0, 1, 0); specifically, these vars are undeclared: redValue = greenValue = blueValue = a; redOffset = greenOffset = blueOffset = b; Thanks! February 5, 2009 9:30 PM Adam said: I have an app where the user may edit brightness/contrast values for an image. If the user changes these values in one session the changes should be visible in later sessions. Does anybody know if these values can be read from the image (and how) or whether they would need to be stored as metadata?http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA March 2, 2009 12:45 PM Andrew Alderson said: Hi Adam, I would never store a manipulated image. Rather you should store the original image (or the path to it) and then store the filters applied separately. This way the user can revert to the original image anytime. Some choices would be to create xml that has the image path and then nodes for the filters. Or if you want to store them as binary use the ByteArray class to serialize the metadata (filters) and the image. An example would be. var ba:ByteArray = new ByteArray(); ba.writeObject(myDrawing); ba.wirteObject({filters:[an array of filters]}; I am currently using a similar approach to this for a vector drawing application I am working on. You would have to do some testing as to what the best way to store the filters are. Also if you go the ByteArray approach not all built in Flash Player classes are serializable so you need to look at registerClassAlias and add any class that you serialize to your application. ex : registerClassAlias(dropShadowFilter, flash.filters.DropShadowFileter); This will ensure that when you deserialize the drawing the filters will be typed and not just generic objects. Also if you are resierailizing a jpg that has been loaded (or a png) look at the JPGEncoder or PNGEncoder classes in the Flex framework. Actually for that matter another choice is to write your own encoder that does exactly what you want it to do - serializes an image and the filters. March 2, 2009 1:21 PM Adam said: Hi Andrew Thanks for your helpful comments. Ill try out your recommended approach. Cheers Adam March 4, 2009 3:54 AM Radek said: This article is SOOO GREAT !! Thank You for that Andrew ! March 7, 2009 11:47 AM Mat said: Great work. I have a question though, after zooming the image (after copyPixels) what then ? Im not sure how to display the newly zoomed area. Any help is appreciated. March 16, 2009 12:28 PM Dev said: Hi Andrew Thanks a lot for such useful Article..its great help and cleared many doubts. dev April 3, 2009 4:46 AMhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA Radek said: Hi, Great tutorial! You have a mistake in brightness with ColorMatrix, it should be: var cmf:ColorMatrixFilter = new ColorMatrixFilter( [ 1, 0, 0,0, value, 0, 1, 0, 0, value, 0,0, 1, 0, value, 0, 0, 0, 1, 0 ]); Any idea how to change the brightness of non-black pixels? Thanks! April 25, 2009 11:27 AM Radek said: Hi, Great tutorial! You have a mistake in brightness with ColorMatrix, it should be: var cmf:ColorMatrixFilter = new ColorMatrixFilter( [ 1, 0, 0,0, value, 0, 1, 0, 0, value, 0,0, 1, 0, value, 0, 0, 0, 1, 0 ]); Any idea how to change the brightness of non-black pixels? Thanks! April 25, 2009 11:28 AM Lucas Oliveira said: Hi guys, I am realy new with Flex... I am trying to use this tips, but i dont know how to load a image... using this tips the first load image data, where goes the image? thanks April 29, 2009 10:34 AM kaushal said: Really great tutorial. I am working on functionality where user can remove white colors from the image, I am almost done with applying specific ColorMatrixFilter, but sometimes it dulling/removing the colors other than white. Please have a look at http://cfcdi.org/colormatrixfilter/ Thanks May 18, 2009 4:42 AM cx113 said: Hi all The problem i now encountered is the memory problem. When the 4MB image load completed, the application would occupy around 8x MB memory. However, the issue occur when i going to implement the ColorMatrix which changing the image Brightness, Contrast, etc .. the memory allocation of app. increased significantly (up to 18x MB) MB. As a WEB app., 18x MB is a BIG number and is the serious concern of performance. The way i do is similiar with the above script, just apply the ColorMatrixFilter onto the image.filters. Hence, hope will get some help from all of you experts .... or any alternative way that would able to changing the Brightness, Contrast of the image but with better performance or any technical suggestions if i implement like that .. any risks !? orhttp://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]
  • Image Manipulation in Flex | InsideRIA is there no other way to solve the problem !? Please help ........ indeed ..... CX113 Regards June 12, 2009 11:52 AM Leave a comment Name Email Address URL  Remember personal info? Comments (You may use HTML tags for style) Captcha: Type the characters you see in the picture above. Preview Submit Contact Us Advertise with Us Privacy Policy Press Center Jobs © OReilly Media, Inc. (707) 827-7000 / (800) 998-9938 Weblog authors are solely responsible for the content and accuracy of their weblogs, including opinions they express, and O’Reilly Media, Inc., disclaims any and all liabililty for that content, its accuracy, and opinions it may contain. For problems or assistance with this site, email feedback@insideria.com . This work is licensed under a Creative Commons License.http://www.insideria.com/2008/03/image-manipulation-in-flex.html[2009-6-15 0:06:42]