Image cropping before uploading an image

Hi all,
I am using webcenter spaces 11.1.1.8.6. I have a requirement where i need an option to crop a image before uploading it. For example before a logged in user uploads his image he should be able to crop only a certain part of the image and upload it. How do i achieve this

Well, I never tried it.But you can use some jquery plugin for this. There is no support out of the box,
try using jcrop
Jcrop: the jQuery Image Cropping Plugin
or see in this list which can work best
http://www.jqueryrain.com/demo/jquery-crop-image-plugin/

Similar Messages

  • Question about image preview in client side before upload the image file to server

    Hi everyone:
    My project has an image upload function. Currently it only display a fileupload component, after user press OK, the file will upload to server, but there's no preview before user press OK.
    I want it can show the preview, I know that I can upload the file to a temporary directory on server then show that image to client, but in this way will cause strain on server. Is there any other ways to preview the image? Like using JavaScript? Thankyou.

    Stuck with BMP

  • Previewing an image before uploading it using the FileReference class

    Previewing an image before uploading it using the FileReference class in flash player 3 not in SDK4

    Previewing an image before uploading it using the FileReference class in flash player 3 not in SDK4

  • Previewing an image before uploading it using the FileReference class in flex 3

    Previewing an image before uploading it using the FileReference class in flex 3 ?

    hai,
              when this code is used in my application ,i got the name of image and new frame is added each time .But image is not displayed.....
    The code  starts like this
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx" initialize="init()"   backgroundColor="white" width="100%" height="100%">
        <fx:Script>
    <![CDATA[ 
                    import mx.controls.Alert;
                    import mx.messaging.Channel;
                    import mx.messaging.ChannelSet;
                    import mx.messaging.channels.AMFChannel;
                    import mx.rpc.events.ResultEvent;
                    import mx.controls.Image;
                    import spark.events.IndexChangeEvent;
                    import mx.managers.DragManager;
      <mx:DataGridColumn headerText="Dimension Value"  width="10" dataField="dimensionValue"/>
                                                   <mx:DataGridColumn headerText="Unit Nmae"  width="10" dataField="dimensionUnitName"/>
                                                   </mx:columns>
                                           </mx:DataGrid>
                                           <mx:Spacer width="2%"/>
                                       </mx:HDividedBox>
                                       </mx:VBox>
                   <mx:Spacer height="0"/>
                <mx:VBox width="100%">
                    <s:HGroup height="90" top="0" left="0" right="0" verticalAlign="justify" gap="10" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5">
                        <s:Button id="btn_loader" top="5" bottom="24" width="100" label="load" click="loadImages()"/>
                        <s:Group width="100%">
                            <s:Group name="cl" top="0" left="0" bottom="0" width="20" mouseOver="//scroll_on(event)" mouseOut="//scroll_off(event)">
                                <s:BitmapImage source="@Embed('../assets/left.jpg')" top="0" left="0" bottom="0" right="0" fillMode="scale"/>   
                            </s:Group>
                            <s:List id="imgList" skinClass="skins.ListSkin" top="-3" left="27" right="28" bottom="10"
                                    dataProvider="{ImageCollection}" itemRenderer="Image_Render">
                                <s:layout>
                                    <s:HorizontalLayout gap="0"/>
                                </s:layout>
                            </s:List>
                            <s:Group name="cr" top="0" right="0" bottom="0" width="20" mouseOver="//scroll_on(event)" mouseOut="//scroll_off(event)">
                                <s:BitmapImage source="@Embed('../assets/right.jpg')" top="-1" left="0" bottom="0" right="0" fillMode="scale"/>
                            </s:Group>
                        </s:Group>
                    </s:HGroup>
                    <s:SkinnableContainer id="dropCanvas" top="100" left="5" right="5" bottom="5" backgroundAlpha="1.0" alpha="1.0"
                                          dragEnter="dropCanvas_dragEnterHandler(event)"
                                          dragDrop="dropCanvas_dragDropHandler(event)" contentBackgroundColor="#914E4E" backgroundColor="#F7F7F7">
                    </s:SkinnableContainer>
                </mx:VBox>
                <mx:Spacer height="5"/>
                                      </mx:VDividedBox>
        </mx:Panel>
    </mx:Canvas>

  • Previewing an image before uploading

    Hi,
    I would like to upload images in my application and save those uploaded images to one folder in my system, i could do that with any problem. But i have to preview the image before uploading.
    How to do this in JSP or either in html?
    please help me in doing this..
    thanks in advance

    Write the image to some temporary location in your server machine. Either public or non-public. If non-public, you could use a servlet to display the image. If the end user has somehow confirmed the preview, then just move that image to the desired permanent location.
    Working with file paths isn't going to work. IE is the only browser which is so dumb that it sends the complete client side file path along with the file name. In other browsers you won't know from which client side path the image is been uploaded.

  • How to customize the images before upload to KM

    hai everybody
    i want to know how to customize the images before uploading into KM.if anybody know reply.thanks in advance

    Hi Kasturi,
    in fact, you could implement a repository service reacting omn the creation of resources, checking if it's an image, and with an image editing API at hand, change the image to your needs; if you need it to be done automatically.
    Hope it helps
    Detlev
    PS: Please consider rewarding points for helpful answers on SDN. Thanks in advance!

  • Do I need to reduce the images size in pixels before upload them to M.Me?

    Do I need to reduce the images size in pixels (actual size jpeg 5616 × 3744 pixels/766kb) before upload them from iPhoto to a Mobile Me Gallery?
    Otherwise they will be heavy or the upload process take care of that?
    It would be nice that iPhoto took care and optimize the images to display online without any more work, because I´ve 1200 images to upload and they´re jpegs 5616 × 3744 pixels. It´s just to viewing purposes. Not o download or print.
    Thanks.

    In fact no matter if I use a High or Medium compression size JPEG, the size after upload is the same.
    Starts with 1,5 MB/5600px (high) or 780kb/5600px (medium) JPEG and ends after upload in 115kb for a 1024px image.
    This means that iPhoto auto compress in order to publish to Mobile Me, even if we start with a bigger file.
    I hope this info is useful to others.
    Thanks.

  • IPhoto 2 shrinks images before uploading them to flickr

    The new version of iPhoto 2 shrinks images before uploading them to flickr. Now you can't use flickr to backup your orginal photos through the iphoto app.

    In fact no matter if I use a High or Medium compression size JPEG, the size after upload is the same.
    Starts with 1,5 MB/5600px (high) or 780kb/5600px (medium) JPEG and ends after upload in 115kb for a 1024px image.
    This means that iPhoto auto compress in order to publish to Mobile Me, even if we start with a bigger file.
    I hope this info is useful to others.
    Thanks.

  • How to upload the image after Cropping or rotation

    i have developed the applet for image rotation and cropping at the client side.i am able to do the all operation at client side but my problem is to how upload those file to server.please any one help me regarding this issue because i am new to java technology

    here by i posted my html page.here what actualy happening is first user selects the number of image to be upload.then i will create that much applet.here user will clicks on applet to select the image then he will do the all the operation.then user will clicks on submit to subit the image.here hidPath contains path information about the image but not the file ex (d:\image\image.jpg).if i submit this hidden variable to server i cannot get the file but i will get only the path info.but i know if i use <input type=file> then i can upload this image without any problem.so please go through this code and send me what all the necessary changes i have to make
    <HTML>
    <HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    </HEAD>
    <BODY>
    <P>Please Enter the Number of image you are going to submit
    <form name="frm">
    <INPUT id=text1 name=text1>   <INPUT id=Submit type=button value=Submit name=Click onclick='fun_app()'>
    </form>
    </BODY>
    </HTML>
    <SCRIPT LANGUAGE=javascript>
    <!--
    function fun_app()
         document.write("<html>");
         document.write("<body>");
         document.write("<form name='frm1' method='post' enctype='multipart/form-data'>");
              for(var i=1;i<=val;i++)
                   //     alert('<applet code="ImageUploadControl.class" archive="test.jar" width="400" height="430" viewAsText id=Applet'+i+'> <param name="imginit" value="DSC00983.JPG"></applet>');
                        document.write('<applet code="ImageUploadControl.class" archive="test.jar" width="445" height="430" viewAsText name=Applet'+i+'> <param name="imginit" value="sos-logo-xsmall.jpg"></applet>');
                        document.write("      ");
         document.write("<input type='hidden' name='hidPath' value=''>");
         document.write("<input type='button' name='btnSubmit' value='Submit' onclick='imgSubmit()'>");
         document.write("</form>");
         document.write("<SCRIPT LANGUAGE=javascript>");
         document.write("function imgSubmit()");
         document.write("{");
         document.write("var numApp=0;");
         for(var j=1;j<=val;j++)
              document.write("if(document.Applet"+j+".strPath()!='strNull')");
              document.write("{");
              document.write("if(document.frm1.hidPath.value=='')");
              document.write("document.frm1.hidPath.value=document.Applet"+j+".strPath();");
              document.write("else");
              document.write("{");
              document.write("document.frm1.hidPath.value=document.frm1.hidPath.value+'&&';");
              document.write("document.frm1.hidPath.value=document.frm1.hidPath.value+document.Applet"+j+".strPath();");
              document.write("}");
              document.write("}");
         document.write("document.frm1.action='https://blretd02/imageupload/upload/uploadim.aspx';");
         document.write("document.frm1.submit();");
         document.write("}");
         document.write("</SCRIPT>");
         document.write("</body>");
         document.write("</html>");
    //-->
    </SCRIPT>

  • Please add "resize image before uploading" and "do...

    SOME of us do NOT want to send bothersome, huge images over mobile devices just to share a pointless moment with a friend - or an enemy.
    Wechat already has this AWESOME feature, so maybe Skype should have one too - as it is so cumbersome to go into another program to resize and save an image before sending it.
    Please add a button to have a possibility of sending a low resoluton version of all images and also before downloading an image to check out if it is worth the money and bandwidth.
    Sincerely, The Wrath of Diego

    You can resize some bitmap, or movieClip, etc. to a new size by making a new bitmapData at the desired size and drawing the source into the new bitmapData. When doing the draw use a Matrix to accomplish the scaling. Something like so:
    var newBitmapData:BitmapData = new BitmapData(320, 240);
    var m:Matrix = new Matrix();
    m.scale(newBitmapData.width / originalBitmapData.width, newBitmapData.height / originalBitmapData.height);
    newBitmapData.draw(originalBitmapData, m);

  • Uploading an image

    Hello I would like to write a program where I can upload an image from my computer and have it displayed in the program. I understand that I need to use JFileChooser to do this but before I start writing code I want to know is it possible to achieve what I am trying? Any feedback will be appriciated thanks

    smithbrian wrote:
    ..I got this code of the net I am trying to modify it and learn from it "so please bear with me"Put that code back in whatever deep, dark hole you found it in. It is so horrid it would take less time to write a simple example from scratch, than to detail the problems with it.
    Try this code..
    import java.awt.*;
    import javax.swing.*;
    import javax.swing.filechooser.FileNameExtensionFilter;
    import javax.imageio.ImageIO;
    import java.net.URL;
    import java.io.IOException;
    public class LoadImage {
      public static void main(String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
          public void run() {
            JFrame f = new JFrame("Load Image");
            f.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
            JFileChooser fileChooser = new JFileChooser();
            FileNameExtensionFilter filter = new FileNameExtensionFilter(
              "Image Files", "jpg", "gif", "png");
            fileChooser.setFileFilter(filter);
            int result = fileChooser.showOpenDialog(null);
            if ( result==JFileChooser.APPROVE_OPTION ) {
              try {
                GUI gui = new GUI(fileChooser.
                  getSelectedFile().
                  toURI().
                  toURL());
                f.setContentPane(gui);
              } catch(Exception e) {
                f.setContentPane( new JLabel(e.getMessage()) );
            } else {
              f.setContentPane(new JLabel("Image load cancelled"));
            f.pack();
            f.setLocationRelativeTo(null);
            f.setVisible(true);
    class GUI extends JPanel {
      Image image;
      public GUI(URL imageUrl) throws IOException {
        super(new BorderLayout());
        image = ImageIO.read( imageUrl );
        JLabel imageLabel = new JLabel( new ImageIcon(image) );
        add(imageLabel);
      public Dimension getPreferredSize() {
        return new Dimension( image.getWidth(this), image.getHeight(this) );
    }

  • External hosting server has problems uploading my images

    Hi. I am experiencing difficulties getting my new hosting provider to upload my images. I use the upload to FTP on the file menu and I get a message in apop up window. "FTP - Validation, Could not validate that the specified domain is associated with the FTP server and folder. Proceed anyway? Yes / No"
    This also occurred on my previous host provider and when I clicked Yes it uploaded OK and my site has been running for several months already.
    My new host's support technician has been on the phone with me all afternoon trying to upload the files. It will upload the HTML files very quickly but then runs into problems with the images. So I have spent  a few hours renaming each file and saving them to web. I have made sure all images and assets are linked and in the same folder.  As the FTP upload struggles on it keeps stopping at various images the the computer freezes and I have to wait until it comes back to life. It doesn't crash.
    My previous host's technicians and the present one suggested that the problem is in the software - Muse.
    Has anyone else had these or similar problems?. Maybe I should rebuild in Dreamweaver?
    Oh by the way, my website www.bilyz.com uploads to Adobe Business Catalyst without a problem. Try it and see.

    Thanks for your help.  I have done as suggested and I have also tried alternative settings without successful upload. I have checked and double checked all the assets, then rechecked the sizes of each of my images before trying to upload to the FTP server.
    1.  I tried to upload with a forward slash in the folder field box - Result was a window " \public_html " does not exist. Do you want to create it?
    > OK
    New window appears: Error creating folder [failed to MKD dir: 553]
    2. Forward slash: The requested folder "/public_home " does not exist. Do you want to create it?  > Yes.
    New window: Could not validate that the specified domain is associated with the FTP server and folder. Proceed anyway? Yes
    3. New window appears: Title of window: Upload to FTP Host
                                    Overall upload progress: 65% complete
    Then uploading stalls and a message appears: Error uploading file lucy.jpg. Click to resume. If problem persists, try again later. [FTP response timeout]
    Each time I click on Resume the screen freezes for a while then returns to 'live' and it all begins again.  It is perplexing me why my site uploads to BusinessCatalyst without any problems.  It also uploaded to Namesco.co.uk without too much difficulty (my first upload)
    Yesterday prior to contacting you the hosting technician at Vidahost.com took command of my computer and tried to see what the problem was but obviously without success and suggested that the Muse software could be at fault - which I doubt.
    I have taken screen capture jpegs of the windows but don't understand how to include them.
    Kind regards
    Bill

  • Preview and Thumb image in MXP Upload

    I've noticed that other content types allow users to upload a
    Preview and a Thumbnail image when uploading their extensions. It
    seems that this option is only unavailable to MXP extensions.
    Is there any reason why we cannot upload these images with
    MXPs also? It would be beneficial from a marketing standpoint, but
    also from the perspective of understanding the extensions before
    downloading.
    I'm interested in learning why this feature has been removed.

    If you are using a Container you just leave your image files in the home directory of your web application. And forget this idea about database. It´s not necessary in this case.
    To display the images just use HTML, <img src="url">.

  • How can I increase the thumbnail size when using Safari to upload an image to a website?

    I upload many images to multiple websites and when using Safari to upload these images, the thumbnails are so small I can barely make out what the image is. I can easily figure out how to increase the thumbnail size when viewing them in Finder and set the default to my liking, but I cannot seem to find a way to do this in Safari. The last topic I saw on this was form 2013 and have not seen any update. Is there a way to do this?

    Delete all unused, invisible layers.
    Sometimes zip compression is better than jpg compression (in the pdf output settings). Zip is lossless, and works better with non gradient colour or no images.
    Flattening the image before you save it to pdf can reduce the file size if you are using jpg compression.
    Post a preview of your pdf and we can comment further on how to reduce the file size.

  • Open a disk image file and crop it to an Image control

    Hi Folks,
    I am trying to allow my users (in a browser) to select/open a disk file (image type) so that they can see it and then save it to the server.  I can use the FileReference object just fine, and load its 'result' directly into a MX:Image control.  However, before I do that I would like to crop the selected imaged to a square shape.  I'd also like to resize the image down, but that will come later, once I get the cropping working.
    I am essentially taking the FileReference result bytearray and converting that to a BitmapData object.  Then, I 'extract' a square of data from that BitmapData object into a new BitmapData object.  Then I need to get *that* BitmapData object into the mx:image control.  I tried using a Bitmap to do so, however the resulting mx:image, while 'sized' correctly, displays as a blank white region.  All along, the variables seem to be 'full' of data and seem to have properly set attributes.  I've looked up quite a few sites that demonstrate cropping, and copying images, but they always start out with 'pre-loaded' images.  I have modeled my code after theirs, where appropriate.
    Here is my code:
              //this gets called when the user clicks a button to 'look for a disk file'
                private function setPhoto():void
                    //create the FileReference instance
                    _fileRef = new FileReference();
                    _fileRef.addEventListener(Event.SELECT, onFileSelected);
                    //listen for the file has been opened
                    _fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
                    var arr:Array = [];
                    arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                    _fileRef.browse(arr); //then let go and let the event handlers deal with the result...
                private function onFileSelected(evt:Event):void
                    _fileRef.load(); //the result of the 'load' will be handled by the 'complete' handler
                private function onFileLoaded(evt:Event):void
                    var tempLoader:Loader = new Loader();
                    tempLoader.loadBytes(_fileRef.data);
                    tempLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaderComplete);
                    //imgPhoto.source = _fileRef.data;  //this would work just fine, though, it wouldn't be cropped
                private function onLoaderComplete(event:Event):void
                    var loaderInfo:LoaderInfo = LoaderInfo(event.target);
                    var loadBD:BitmapData = new BitmapData(loaderInfo.width,loaderInfo.height);
                    //ok, now that we have the 'original' file in the bitmap data, we can crop it and then later resize it
                    //so, we need a 'square' of image cropped out of the original
                    //so...first we get a square of the 'full size' image
                    //if the image is taller than wide, we will take a square as wide as the image, and as tall as it is wide, starting 5% down from the top
                    //if the image is wider than tall, we will take a square as tall as the image, and as wide as it is tall, from the horizontal middle
                    var curW:int = loadBD.width;
                    var curH:int = loadBD.height;
                    var cropX:int = 0;
                    var cropY:int = 0;
                    var cropW:int = curW;
                    var cropH:int = curH;
                    var needCrop:Boolean = true; //default is to crop
                    var croppedBD:BitmapData;
                    if (curH > curW)
                        cropY = Math.round(curH * .05); //start at 5% down
                        cropH = cropW;
                    else if (curW > curH)
                        cropX = Math.round(curW/2) - Math.round(curH/2); //start at the middle, go 'back' by half the height
                        cropW = cropH;
                    else
                        needCrop = false; //it's already a square!  nothing to do (aside from the resize)
                    if (needCrop)
                        croppedBD = new BitmapData(cropW, cropH); //at this point it is 'empty', so fill it up
                        var fillPoint:Point = new Point(0,0); //since we're gonna fill into the top, left pixel on down and over
                        var fillRect:Rectangle = new Rectangle(cropX,cropY,cropW,cropH);
                        croppedBD.copyPixels(loadBD,fillRect,fillPoint);
                    else
                        croppedBD = loadBD;
                    imgPhoto.source = new Bitmap(croppedBD);  //this produces a properly sized, but blank-white image
    And here is the mxml for the image:
    <mx:Image id="imgPhoto" x="40" y="126" maxWidth="200" maxHeight="200" />
    Thanks!
    -David

    Hi,
    You were close to the solution.
    In "onLoaderComplete(event:Event):void", at the begining you create a BitmapData called "loadBD", you just forgot to fill it with the content from the loaderInfo.
    private function onLoaderComplete(event:Event):void {
         var loaderInfo:LoaderInfo = LoaderInfo(event.target);
         var loadBD:BitmapData = new BitmapData(loaderInfo.width,loaderInfo.height);
         loadBD.draw(loaderInfo.content);
    Kind regards,
    Mich

Maybe you are looking for