1 Reply Latest reply on May 8, 2012 10:41 PM by samarth9

    Brightness and contrast slider and crop the image in flex application

    Manjurhusen

      Hello Friends

       

      I need your help so please help me. Thanks in advance.

       

      I created one flex application for edit image. I taken one mx:Image control. I set source for that. I applied RGB effect and working perfect. Now i want to add Brightness and Contrast slider to change effect in image so can you tell me how can create brightness and contrast effect in image. Following is my code.

      I created component and called in application

       

      <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               width="850" height="580" creationComplete="init()" >
          <fx:Declarations>
              <s:Resize id="resize" target="{imgedit}"/>
              <s:Rotate id="rotate" target="{imgedit}"/>
          </fx:Declarations>
         
         
          <fx:Script>
              <![CDATA[
                 
                  import com.wirelust.imagecrop.CropBox;
                  import com.wirelust.imagecrop.ImageCrop;
                 
                  import flash.geom.ColorTransform;
                  import flash.net.navigateToURL;
                 
                  import mx.controls.Alert;
                  import mx.graphics.ImageSnapshot;
                  import mx.managers.PopUpManager;  
                 
                  [Bindable]    private var _imageURL:String = "images/advertise1.jpg";
                  [Bindable] [Embed(source="images/advertise1.jpg")] public var iconedtimg:Class;
                 
                  [Bindable] [Embed(source="images/clockwise-arrow1.png")] public var iconclockwise:Class;
                  [Bindable] [Embed(source="images/Conterclockwise-arrow1.png")] public var iconconterclockwise:Class;
                 
                  [Bindable] [Embed(source="images/toolicons/icon_save.png")] public var iconsave:Class;
                  [Bindable] [Embed(source="images/toolicons/printer.png")] public var iconprint:Class;
                  [Bindable] [Embed(source="images/toolicons/copy_new.png")] public var iconcopy:Class;
                  [Bindable] [Embed(source="images/toolicons/Undo.png")] public var iconundo:Class;
                 
                 
                  [Bindable] [Embed(source="images/toolicons/zoom_in.png")] public var iconzoomin:Class;
                  [Bindable] [Embed(source="images/toolicons/zoom_out.gif")] public var iconzoomout:Class;
                  [Bindable] [Embed(source="images/toolicons/fit_in_window.png")] public var iconfitinwindow:Class;
                  [Bindable] [Embed(source="images/toolicons/rotate_ccw.png")] public var iconrotateconterclockwise:Class;
                  [Bindable] [Embed(source="images/toolicons/rotate_cw.png")] public var iconrotateclockwise:Class;
                  [Bindable] [Embed(source="images/toolicons/flip_horizontal.png")] public var iconfliphorizontal:Class;
                  [Bindable] [Embed(source="images/toolicons/flip_vertical.png")] public var iconflipvertical:Class;
                  [Bindable] [Embed(source="images/toolicons/crop.gif")] public var iconcrop:Class;
                  [Bindable] [Embed(source="images/toolicons/rotate.png")] public var iconrotate:Class;
                 
                 
                 
                 
                 
                  [Bindable]
                  public var angle:Number = 0;
                 
                  [Bindable]
                  private var borderHeight:Number;
                 
                  [Bindable]
                  private var borderWidth:Number;
                 
                  private var effectDuration:Number = 1500;
                  private var defaultRotation:Number = 45;
                 
                  private var profits:Array;
                  private var dragStart:Point;
                  private var dragEnd:Point;
                  private var zoomingEnabled:Boolean;
                 
                  public var originalHeight:Number;
                  public var originalWidth:Number;
                  private var imgsnap:ImageSnapshot;
                  //private var crop:CropBox;

       

                 
                 
                  public function init():void{
                      originalHeight = imgedit.height;
                      originalWidth = imgedit.width;
                      borderHeight = borderContainer.height - 5;
                      borderWidth = borderContainer.width - 5;
                     
                     
                      /*crop=new CropBox();
                      crop=imgedit as CropBox;
                      crop.cropX = 178;
                      crop.cropY = 187;
                      crop.cropWidth = 249;
                      crop.cropHeight = 219;
                      */
                     
                     
                     
                  }
                 
                 
                  public function fitToWindow():void{
                      resize.end();
                      resize.duration = effectDuration;
                     
                      if(imgedit.rotation == defaultRotation || imgedit.rotation == -defaultRotation){
                          Alert
                          resize.heightTo = borderWidth;
                          resize.widthTo = borderHeight;
                      }
                      else{
                          resize.heightTo = borderHeight;
                          resize.widthTo = borderWidth;
                      }
                     
                      resize.play();
                  }
                 
                  public function fitToWidth():void{
                      resize.end();
                      resize.duration = effectDuration;
                     
                      if(imgedit.rotation == defaultRotation || imgedit.rotation == -defaultRotation){
                          resize.heightTo = borderWidth;
                      }
                      else{
                          resize.widthTo = borderWidth;
                      }
                     
                      resize.play();
                  }
                 
                  public function fitToHeight():void{
                      resize.end();
                      resize.duration = effectDuration;
                     
                      if(imgedit.rotation == defaultRotation || imgedit.rotation == -defaultRotation){
                          resize.widthTo = borderHeight;
                      }
                      else{
                          resize.heightTo = borderHeight;
                      }
                     
                      resize.play();
                  }
                 
                  public function zoomIn():void{
                     
                      resize.end();
                      resize.duration = effectDuration;
                      resize.heightTo = imgedit.height*2;
                      resize.widthTo = imgedit.width*2;
                      resize.play();
                     
                      //imgsnap=new ImageSnapshot
                      //imgsnap=ImageSnapshot.captureImage(imgedit);
                      //imgsnapshot.source=imgsnap.data;
                  }
                 
                  public function zoomOut():void{
                      resize.end();
                      resize.duration = effectDuration;
                      resize.heightTo = imgedit.height/2;
                      resize.widthTo = imgedit.width/2;
                      resize.play();
                  }
                 
                  public function rotateRight():void{
                      rotate.end();
                      rotate.duration = effectDuration-200;
                      rotate.angleFrom = angle;
                      rotate.angleTo = (angle += defaultRotation);
                      rotate.play();
                  }
                 
                  public function rotateLeft():void{                   
                      rotate.end();
                      rotate.duration = effectDuration-200;
                      rotate.angleFrom = angle;
                      rotate.angleTo = (angle -= defaultRotation);
                      rotate.play();
                  }   
                 
                  //rotate to all degree
                 
                  public function rotateeffect():void{                   
                      /*rotate.end();
                      rotate.duration = effectDuration-200;
                      //rotate.angleFrom = 0;               
                      rotate.angleTo = rotateHS.value;
                     
                      rotate.play();*/
                     
                      imgedit.rotation=rotateHS.value;
                  }   
                 
                  //change brightness
                  public function setbrightness():void{                   
                      var colorTransformer:ColorTransform = new ColorTransform(1, 1, 1, 1,redHS.value, greenHS.value, blueHS.value, 0);
                      colorTransformer.redOffset=brightnessHS.value;
                      colorTransformer.greenOffset=brightnessHS.value;
                      colorTransformer.blueOffset=brightnessHS.value;
                     
                     
                     
                      imgedit.transform.colorTransform=colorTransformer;
                  }   
                 
             
                  //change RGB color of image
                  private function changeColors():void
                  {

       

                      imgedit.transform.colorTransform =new ColorTransform(1, 1, 1, 1,redHS.value, greenHS.value, blueHS.value, 0);
                     
                  }
                 
                

       

       

       

       

                  //zoom in
                  protected function imgzoomin_clickHandler(event:MouseEvent):void
                  {
                      zoomIn();
                  }
                 
                  //zoom out
                  protected function imgzoomout_clickHandler(event:MouseEvent):void
                  {
                      zoomOut();
                  }
                 
                  //fit to window
                  protected function imgfitinwindow_clickHandler(event:MouseEvent):void
                  {
                      fitToWindow();
                  }

       

                  //rotate 45 degree conter clockwise
                  protected function imgrotateconterclockwise_clickHandler(event:MouseEvent):void
                  {
                      rotateLeft();
                  }

       

                  //rotate 45 degree  clockwise
                  protected function imgrotateclockwise_clickHandler(event:MouseEvent):void
                  {
                      rotateRight();
                  }

       

                 //flip horizontal
                  protected function imgfliphorizontal_clickHandler(event:MouseEvent):void
                  {
                      //fitToWidth();
                     
                      flipImage(imgedit,"hr");
                  }

       

                  //flip vertical
                  protected function imgflipvertical_clickHandler(event:MouseEvent):void
                  {
                      //fitToHeight();
                     
                      flipImage(imgedit,"vr");
                  }

       

                  //crop image
                  protected function imgcrop_clickHandler(event:MouseEvent):void
                  {
                     
                  }

       

                  //rotate image any degree
                  protected function imgrotate_clickHandler(event:MouseEvent):void
                  {
                     
                  }

       

                
                  private static function flipImage(image:Image,fliptype:String):void {
                      // Calculate offset
                      var offsetWidth:Number = image.contentWidth/2.0;
                      var offsetHeight:Number =  image.contentHeight/2.0;
                     
                      // Perform horizontal flip
                      var matrix:Matrix = new Matrix();
                      matrix.translate(-offsetWidth, -offsetHeight);
                      if(fliptype=="hr")
                      {
                          matrix.scale(-1, 1);  // change to matrix.scale(1,-1) for vertical flip
                      }
                      else if(fliptype=="vr")
                      {
                          matrix.scale(1,-1);
                      }
                     
                      matrix.translate(+offsetWidth, +offsetHeight);
                      matrix.concat(image.transform.matrix);
                      image.transform.matrix = matrix;
                  }

       

       

       

              ]]>
          </fx:Script>
         
          <s:VGroup width="850" height="100%" gap="0">
             
         
          <s:BorderContainer id="brdtop"  width="100%" height="60" backgroundColor="#adc9f9"  cornerRadius="0" borderWeight="0"   borderColor="#adc9f9">
              <s:HGroup width="100%" height="100%" paddingTop="5" paddingLeft="5">       
                  <mx:ApplicationControlBar  id="appbar1"  dropShadowVisible="true"   styleName="stApplicationControlBar" horizontalGap="4"  focusEnabled="true">
                      <mx:Image id="imgsave" source="{iconsave}" />
                      <mx:Image id="imgprint" source="{iconprint}"/>
                      <mx:Image id="imgcopy" source="{iconcopy}" />
                      <mx:Image id="imgundo" source="{iconundo}" />               
                  </mx:ApplicationControlBar>
                 
                  <mx:ApplicationControlBar  id="appbar2"  dropShadowVisible="true"   styleName="stApplicationControlBar" horizontalGap="4"  focusEnabled="true">
                      <mx:Image id="imgzoomin" source="{iconzoomin}"    toolTip="Zoom In" click="imgzoomin_clickHandler(event)"  />
                      <mx:Image id="imgzoomout" source="{iconzoomout}" toolTip="Zoom Out"    click="imgzoomout_clickHandler(event)"  />
                      <mx:Image id="imgfitinwindow" source="{iconfitinwindow}" click="imgfitinwindow_clickHandler(event)" />
                      <mx:Image id="imgrotateconterclockwise" source="{iconrotateconterclockwise}" click="imgrotateconterclockwise_clickHandler(event)"/>
                      <mx:Image id="imgrotateclockwise" source="{iconrotateclockwise}" click="imgrotateclockwise_clickHandler(event)" />   
                      <mx:Image id="imgfliphorizontal" source="{iconfliphorizontal}" click="imgfliphorizontal_clickHandler(event)" />
                      <mx:Image id="imgflipvertical"  source="{iconflipvertical}" click="imgflipvertical_clickHandler(event)" />
                      <mx:Image id="imgcrop" source="{iconcrop}"  click="imgcrop_clickHandler(event)"/>
                      <mx:Image id="imgrotate" source="{iconrotate}" click="imgrotate_clickHandler(event)" />   
                  </mx:ApplicationControlBar>
              </s:HGroup>
          </s:BorderContainer>       
          <s:HGroup width="100%" height="100%">               
                     
              <s:VGroup width="530" gap="10" height="100%">
              <s:BorderContainer id="borderContainer" width="100%" height="450">
                  <s:Scroller    width="500"    height="450">
                      <s:Group>   
                                             
                  <mx:Image     id="imgedit" source="{iconedtimg}" maintainAspectRatio="false" maintainProjectionCenter="true"
                       verticalCenter="0"    horizontalCenter="0"
                      horizontalAlign="center" verticalAlign="middle"/>
                      </s:Group>
                      </s:Scroller>
                 
                 
              </s:BorderContainer>
                             
               
              </s:VGroup>
             
              <s:VGroup width="100%" height="100%">
                  <s:BorderContainer id="brdright"  width="100%" height="100%" backgroundColor="#7899E1"  cornerRadius="0" borderWeight="0"   borderColor="#7899E1">
                         
                     
                  <mx:Form>
                     
                     
                      <mx:FormItem label="Rotate: ">
                          <s:HSlider id="rotateHS" minimum="-360" maximum="360" liveDragging="true"
                                     stepSize="1" value="0" width="200" valueCommit="rotateeffect()" />
                      </mx:FormItem>
                     
                     
                     
                                      <mx:FormItem label="Brightness: ">
                          <s:HSlider id="brightnessHS" minimum="-100" maximum="100" liveDragging="true"
                                     stepSize="1" value="0" width="200" valueCommit="setbrightness()" />
                      </mx:FormItem>
                      <mx:FormItem label="Contrast: ">
                          <s:HSlider id="contrastHS" minimum="-255" maximum="255" liveDragging="true"
                                     stepSize="1" value="0" width="200" valueCommit="" />                   
                      </mx:FormItem>
                     
                      <mx:FormItem >
                                         
                      </mx:FormItem>
                          <mx:FormItem label="Red: ">
                          <s:HSlider id="redHS" minimum="-255" maximum="255" liveDragging="true"
                                     stepSize="1" value="0" width="200" valueCommit="changeColors()" />
                      </mx:FormItem>
                      <mx:FormItem label="Green: ">
                          <s:HSlider id="greenHS" minimum="-255" maximum="255" liveDragging="true"
                                     stepSize="1" value="0" width="200" valueCommit="changeColors()" />                   
                      </mx:FormItem>
                      <mx:FormItem label="Blue: ">
                          <s:HSlider id="blueHS" minimum="-255" maximum="255" liveDragging="true"
                                     stepSize="1" value="0" width="200" valueCommit="changeColors()" />                   
                      </mx:FormItem>
                  </mx:Form>
                  <mx:Image id="imgsnapshot" />
                      </s:BorderContainer>
              </s:VGroup>
             
          </s:HGroup>
         
          </s:VGroup>
         
      </s:TitleWindow>

       

       

       

      Can you tell me how to set brightness and contarst?

       

      I written code for brightness but it remove the RGB effect so would you plz tell me how can i set brightness and contrast effect in mx:Image conatrol.

       

      Also i want to add Cropbox to crop the image so can you plz tell me how to crop image and save croped image?

       

      Thanks in advance.

       

       

      I hope i will get answer as soon as possible.

        • 1. Re: Brightness and contrast slider and crop the image in flex application
          samarth9

          i used image.filters to do this for brightness, contrast, situration..

           

          image1.filters = [image.motion.AdjustColor.setBrightness(brightSlider.value),

                                                                      image.motion.AdjustColor.setContrast(contrastSlider.value),

                                                                      image.motion.AdjustColor.setSaturation(siturationSlider.val ue)

                                                            ];