Resize and crop images to a specific width and height

Hi,
I want to convert images to thumbnails with a 'standard' format - I need all images to have the same width and height.
So I need to resize and then crop the images. Is this possibe with JAI? Are there other libraries which can do this better?
I've read about ImageMagick - are the Java interfaces to ImageMagick good?
/best regards, Håkan Jacobsson - System developer in Sweden

Duplicate posting, answers are here
http://forums.sun.com/thread.jspa?threadID=5419291
Pleas don't duplicate unless you note that you have done so and provide pointers to the duplicates - as I'm sure you're aware. . .

Similar Messages

HOW DO YOU SIZE AN IMAGE TO A SPECIFIC WIDTH AND HEIGHT ?

I need to size an image to 851 X 315, as recommended by Facebook to fit into the Timeline, but when I type 851 in the width, the Height goes to 532.
the problem is when I change the height to 315, the length is reduced again, which is not supposed to.
Should I unlink them and how? And would that cause distortions? thanks

set the crop tool to restrain to 851 x 315
Since your image is not proportional to that dimension, you will have to crop part of it out.

HOW TO: Action to resize & center crop images of various sizes

Hello,
I've gotten a lot of help here over the years so I wanted to share an action I created. I needed to resize and automatically center crop images of various sizes for my company's website. For example: All images needed to be 900px x 460px 72dpi - and because input images were from many different sources, the dimensions were different for each image. It seemed straight forward at first (sort of) but I couldn't find a way of doing this without a script or some third party program - so I came up with the following action. Hope someone gets some use out of it.
Note: Change action as needed to suit your needs.
Resize and Center Crop (Auto)
Fit Image
     height: 900px
     width: 900px
     With Don't Enlarge
Canvas Size
     height: 460px
     vertical: center
     extension color: white
Image Size
     width: 900px
     resolution: 72 per inch
     with scale styles
     with constrain proportions
Save (optional)
     As: JPEG
     Quality: 12
     Scans: 5 (for web images)
This assumes that the images are at least horizontal, but if you have photoshop CC you can create a conditional action that will work with vertical and horizontal images. If you are square cropping, this action makes it a breeze. I also have an action that uses the same basic logic, but lets me manually move the crop box. The only real issue I have encountered is when the original image ratio is very narrow, which leads to some white space on the top and bottom (I'm working on updating the action to address this). But it has worked on about 95% of my images. Again, you will probably need to adjust all of the variables depending on what you are trying to do, but it should be possible with the same steps. And of course this can also be used to batch process.
Feel free to let me know if anyone comes up with improvements! Thanks

Hmm thanks Mylenium, I got that response a lot when I was searching before. But if you re-read above, I am explaining a method of doing it without a script. So it wasn't really a question, just a tip in case anyone else wanted to do the same.

Can't Crop Images Properly

Hello everyone,
I am using Adobe Photoshop CC and I want to crop an image by a specific Width x Height. In previous versions of Photoshop, I was easily able to select the crop tool and input the dimensions up top where it would be labeled as W x H. Now, there are no options for W x H now and all I can choose are weird ratios. I have looked online on how to use the crop tool, and every single tutorial I've looked at says to use the Width x Height option, AKA unconstrained, but that doesn't exist. Instead, all I can choose are ratios and there are arrows in between the input boxes instead of an "x" symbol. I've attached an image to show what few options I have, none of which are Width x Height or unconstrained. How do I fix this?

What you have highlighted is what you want. Select that and put the values in on the menu bar.

How do I get a header image to span the width of the screen without getting distorted?

I've just finished two online classes for Dreamweaver through Ed2go and have a reasonable idea of HTML and CSS. What I'm trying to do is a re-make of my personal web site (www.astral-imaging.com) that I display my astronomy images using all CSS layout and proper HTML coding. The existing site was done long ago using FrontPage and is loaded with tables and nested tables for layout. I need to make several templates for repeated pages but I'm lost on how to create my header banner. I've used Photoshop CS5 to create what I want to use and saved it as a .JPG file. The original canvas size is 1000x200 pixels but I also want the site to use a liquid template so that if the viewer is using a monitor at 1024 width or higher the page will fill the screen.
My target audience is mostly people in astronomy groups that I participate with and their screen resolutions will most like be 1280 and up. The images posted are usually 1000, 2000, and 3000 pixels wide. The reason for this is that there is very faint and small detail in these images and the larger sizes allows the viewer to scroll around in the full sized images to see this detail. There are links so the viewer has a choice of how large an image they want to view. So this explains my rational behind the sizing and I'm left with how to make the header expand without distorting to various sized displays. Below is what I had designed. Am I asking for too much or just a bit too green to know what to do? Any suggestions would be extremely welcomed. The PSD file has the separate 4 layers. What I have though about is the header being multiple images:
the actual background gradient image
the DRO info floated left
Glimpses of Our Universe centered
image floated right
Only issue is I'm not sure if this will work and if so what is the proper coding? I think there needs to be a div container and although I know how to create the div, inserting multiple items into it and using CSS to style them is confusing me. Is there a link to information on DIVs that would help explain this. From what I've seen from my Google searches I haven't seen anything that addresses this. Maybe I need better search terms.
Thanks,
Steve

Nancy,
I appreciate the feed back but this doesn't extend the banner across the page. I understand the header background color filling in the area to the right of the banner image as well as the background color of the body tag. I guess what I'm wondering is if it's possible to have multiple images in the header div tag? I may not even be explaining this correctly. If I were using a table to lay this out it would have 1 row and 3 columns with the gradient image as the background in all 3. I could keep the cell width set to a fixed number for the right and left cell while center cell would be able to span the remainder of the screen width to fill across the top of the page. The hight would adjust to maintain the aspect ratio. Does this make any sense?
Basically the code below is what I'm after but using CSS to lay it out and not a table:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
table {
background-image: url(images/banner_background.png);
text-align: left;
body {
background-color: #000;
.center {
text-align: center;
background-image: url(images/banner_background.png);
.right {
background-image: url(images/banner_background.png);
margin: 1px;
padding: 0px;
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <th width="22%" scope="col"><img src="images/DRO_trans.png" width="325" height="200"></th>
    <th width="59%" class="center" scope="col"><img src="images/glimpses-astral.png" width="450" height="120"></th>
    <th width="19%" scope="col"><img src="images/Thor-3rd-300.jpg" width="300" height="198" alt="Thor's Helmet"></th>
</tr>
<tr>
    <td colspan="3"> </td>
</tr>
</table>
</body>
</html>
If it's any help or you are curious, the png files can be downloaded here: http://www.astral-imaging.com/test_images.zip
Thanks,
Steve

Image width=auto height=auto problems in Internet Explorer

I thought I was having an issue with my MM_swapimage in Internet explorer but it appears to be my images scale.
I have my main large image that has a width=auto height=auto which does not appear in Internet Explorer only
the smaller "thumb" images of varying size have a height=40px width=auto so that the different sizes of thumb images look horizontaly uniform. how do I get the images to work without setting the exact scale for each image?

once I removed the "auto" setting everything worked just fine, the images came in at the proper pixel size, and the thumb nail images where proportional in size seeing how I had a height set of 40 px the width took care of itself.
Any Ideas on where I can find a good tutorial on client login and password to access pages with their content?

Background image not displaying 100% width of iphone

Hi I am getting some strange behaviour on my iphone using firefox but displaying perfectly in firefox on computer. I do not wish to submit the name of site as I do not want it to show up in search results but if anyone can help me I will pm site address. Thanks.
As the header's width is 100%, why is there the need for margin: 0 auto or text-align:center? Surely the background image should just display to 100% of the screen? Then the actual logo image that sits in the header div should have text align and margin auto yes? I know that applying these rules this way does not center the logo within the div but WHY? I have uncommented out the text align and margin auto on the header div and it displays properly on my computer but not on the iphone.
With regards to iphone the background image stops short of the logo by a small amount, I have not designed a separate style sheet for iphones, not part of the scope but as the rest of the pages display ok why does the background image stop just short of the logo image?
I really appreciate your input.
This is the CSS
#header {
   width:100%;
height:117px;
    padding: 0 0 0 0;
/*    text-align:center;
    margin:0 auto;*/
    background:url(images/header-bg2.jpg) left repeat-x;}
#header a img {
    border:none;
    padding:0;
    margin:0 auto;
    text-align:center;}
<div id="header">
<a href="http://www.xxxxxxxxxxxxxxx.com.au"><img src="images/KPS-logo.png" width="1024" height="117" alt="xxxxxxxxxxx Logo" /></a>
</div> 

You have nothing defining your background image size, just the box that holds it
try adding some CSS to control the actual background image...
background-size:cover;
background-position:right top;
background-repeat:no-repeat;
background-atachment:fixed;

Image resizing and cropping

Hi,
I want to convert images to thumbnails with a 'standard' format - I need all images to have the same width and height.
So I need to resize and then crop the images. Is this possibe with JAI? Are there other libraries which can do this better?
I've read about ImageMagick - are the Java interfaces to ImageMagick good?
/regards, Håkan Jacobsson

Depending on the format of your files, you need not go into JAI. You may be able to do what you want with ImageIO.
You just need to load the image, select the part you want, then check the length to width ratio to make sure it is appropriate, if not, then adjust it as such.
If you want to get a 100, 100 thumb from a 1024, 768 image you can do this:
BufferedImage bi = new BufferedImage(100, 100, BufferedImage.TYPE_INT_RGB);
Graphics2D g = bi.createGraphics();
g.drawImage(my1024x768, 0, 12, 100, 75, Color.BLACK, null);
g.dispose();please note, that to get 1024 shunk up to 100, you need to divide by 10.24, when you do the same to the height of the image, you get 75, this leaves 25 pixels--so I centered the image at 12.
to save the thumb in JPG:
File f = new File(myFileNameAndPath);
f.createFile();
ImageIO.write(bi, "JPEG", f);**WARNING** untested code.

Cropping images and resizing

I'm trying to take several images, find the largest one and then make sure all the rest are that size and centered in that image with a transparent border/background around them for any space left.
For example:
I have 3 100x100px images and the 4th is 150x120px. I want the first 3 to be the same size as number 4 but not be enlarged, just centered in an image that is the same size as the 4th.
I have hundreds of images to do this to so one at a time isn't a great option, is there a way to make an action to do this? I've had no luck.
So far I've tried using scripts to merge the files as layers into one document, crop the image way bigger than any image will be then trim to hit the border of the largest image. That works fine...but then how can I save those layers back out as their respective png files again?
I'm on CS5 btw.
Thanks.

blanktarget2 wrote:
I'm trying to take several images, find the largest one and then make sure all the rest are that size and centered in that image with a transparent border/background around them for any space left.
To start with depending on your image file mix there may be a basic problem. If there is a mixture of Landscape and portrait images none of the images you have may not have a width and height that is largest of all the images.
Photoshop ships with a script you can use that will help you do what you want though. If you open Photoshop and use menu File>Scripts>Load Files into Stack... you can point its dialog to a folder that has your image collection. This script will load all images in that folder into a single document that will have a canvas size that is as wide as the image with the largest width and as high as the images with the largest height. None of the layers may be that size and the layers contents may not be centered within this canvas size. However that can easly be done.
The top layer I beleive will be the current target after Load Files into stack runs. Hold down the shift ken and mous click on the bottom layer in the layers palette. All layers should now be targeted.
Then do a select all
then menu Layers>align layers to selection>Vertical Center
then menu Layers>align layers to selection>Horizontal Center
All layers will now be centered within the documents canvas size. That would be easy to do in an action. Now you would need to create a new document with a transparent background the current canvas size for each layer and mover a layer centered into it and delete the bottom layer and save a image file in a format that supports transparency.
Once you have your image stack in the proper canvas sized document centered or not you should be able to create an script to create your output files.

How to resize and maintain height and width ratio IR image column

Hello, I am upgrading from 3.2 to 4.1 reports that include images in report columns. I have had good success with this except for one thing. If the height and width is fixed it distorts the photos, and if I do not have fixed dimensions the image may be too large depending on the original dimensions of the :P1_PHOTO item which is File Browse... BLOB column. I do not want to restrict users ability to upload large image files, or files with different dimensions, but I want them to display as a thumbnail size proportional to the original dimensions in the report, or maybe I need a different approach? Report region template is No Template. I appreciate any suggestions.
select decode(nvl(dbms_lob.getlength(photo),0),0,null,'<img src="'||apex_util.get_blob_file_src('P1_PHOTO',id)||'" height="75" width="75"/>') photo from table.
I tried using percent i.e.: width="10%" that does not work.
I have tried several variations of <style> in page HTML header to change column width, but the image size does not change.
<style>
td[headers="PHOTO"] {
width:75px;
</style>
<style>
#apexir_PHOTO{width: 75px;}
</style>
Thanks.

Try to go with max-width / max-height. However, if you have IE browser, hang on for pain. For some ideas, some links:
http://wordpress.mfields.org/2011/scaling-images-in-ie8-with-css-max-width/ (ignore object-fit, it is not yet supported on most browser)
http://stackoverflow.com/questions/3915219/max-width-on-img-tag-not-working-in-ie8
etc. Be sure to try out your chosen solution on the target browser(s)!
IE is just nasty :(
What i have done before is not to have my browser scale my images, especially when the images can be large(r) and you expect quite some traffic. All those extra (kilo)bytes won't help it load faster. I just added an extra column in the table, like photo_thumb, and create a scaled version of the uploaded picture when it is being inserted.
For example, i have the following process on my apex page, and i'm using wwv_flow_files.
Have some code:
IF :P3_FIND_PHOTO IS NOT NULL THEN
   DECLARE
     v_id number;
     v_small_photo blob;
     v_large_photo blob;
     v_mime_type apxt_contacts_img.mime_type%type;
     v_content_type apxt_contacts_img.content_type%type;
   BEGIN
      SELECT blob_content a, blob_content b, mime_type, content_type
      INTO v_small_photo, v_large_photo, v_mime_type, v_content_type
      FROM wwv_flow_files
      WHERE name = :P3_FIND_PHOTO;
      IF lower(v_mime_type) NOT IN ('image/jpg', 'image/jpeg') THEN
         raise_application_error(-20001, 'File for upload is not a jpg!');
      END IF;
      -- Rezise the photo so that it is proportionally 125*125
      -- ordimage is an oracle type able to manipulate all sorts of pictures
      ordimage.process(v_small_photo, 'maxScale=125 125');
      -- If contact is of type personnel, then no need to store
      -- a large photo since it wont be displayed
      IF :P3_CONTACT_TYPE_ID = 2 THEN
        v_large_photo := NULL;
      END IF;
      -- Delete previously uploaded picture
      IF :P3_ID IS NOT NULL THEN
         DELETE FROM apxt_contacts_img
          WHERE contact_id = :P3_ID;
      END IF;
      -- Insert the data into the contacts_img table as a
      -- SELECT from WWV_FLOW_FILES
      INSERT INTO apxt_contacts_img
      (contact_id,
       image_name,
       mime_type,
       content_type,
       filename,
       small_photo,
       large_photo)
      VALUES
      (:P3_ID,
       :P3_LASTNAME,
       v_mime_type,
       v_content_type,
       :P3_FIND_PHOTO,
       v_small_photo,
       v_large_photo);
      -- Remove the image from the apex wwv_flows_files table
      DELETE FROM wwv_flow_files WHERE name = :P3_FIND_PHOTO;
   END;
END IF;

Resizing and positioning a stage with a background image

Hey guys,
I'm trying to get some specific behaviour on a stage as I think it'll work out best for the application I am doing. The module I am working on right now consists of a stage with an imageview bound to the width and height and an image inside. I'm eventually looking to setup some animations and such which will overlay on the image but I want the window to be resizable in various ways.
Right now, when the stage is created I manually set the width and height so the image fits perfectly in the stage. For resizing, I want the user to be able to drag either the height or width or diagonal sliders but have the original aspect ratio of the stage retained. I have the preserveRatio variable set to true in the ImageView which makes the image not become distorted, but the stage can be extended horizontally/vertically/diagonally to any ratio which I'd rather not have. In terms of fullscreening, I'd like to allow it and have the image centred.
I've tried to see if the LayoutInfo class can help me out, but it doesn't seem to have any implementations which are too useful for what I am trying to do. So does anyone know how I can accomplish the above? I'm very new to JavaFX so if anyone can make any other suggestions in terms of the objects I am using and what's best practices for what I am trying to do, it would be much appreciated. I've looked into using PathAnimation and PathTransition for the animations I am using and while they'd do most of the job well, I need to be able to place objects, modify speeds, locations etc. so I'll probably just end up making some custom drawing methods.
Thanks in advance,

Similar request in [JavaFX rezising-scaling scene & elements|http://forums.sun.com/thread.jspa?threadID=5437642]...
Mmm, I made various experiments. The difficulty is to watch both dimensions, because when one change, the other must be changed as well, but the watch is then triggered, making a cascade of changes... I solved it (partly) with a boolean disabling the secondary change.
def image = Image
    url: "file:///D:/images/forest_0003_1024.jpg";
    preserveRatio: true
def startSize = image.width / 3;
var bResizingWidth: Boolean;
var bResizingHeight: Boolean;
var stw = bind scene.width on replace
println("Width -> {stw}");
    ResizeStage(true);
var sth = bind scene.height on replace
println("Height -> {sth}");
    ResizeStage(false);
var scene: Scene;
var iv: ImageView;
def stage = Stage
    title: "Proportional Stage"
    scene: scene = Scene
        content: iv = ImageView
            image: image
            preserveRatio: true
            fitWidth: startSize
def frames: java.awt.Frame[] = java.awt.Frame.getFrames();
//~ println(frames[0]);
def insets = frames[0].getInsets();
//~ println("T={insets.top} L={insets.left} B={insets.bottom} R={insets.right} ");
def insetX = insets.left + insets.right;
def insetY = insets.top + insets.bottom;
function ResizeStage(bIsWidth: Boolean): Void
    if (stage.width == 0) return; // Init, nothing to do
    if (bResizingHeight and bIsWidth) // One dim is changed, don't react on setting of other dim
        bResizingHeight = false;
        return; // Just ignore secondary change
    if (bResizingWidth and not bIsWidth) // Idem
        bResizingWidth = false;
        return; // Just ignore secondary change
    if (bIsWidth)
        bResizingWidth = true;
    else
        bResizingHeight = true;
    println("Stage: {stage.width} x {stage.height}");
    def ratio = image.width / image.height;
    if (bIsWidth)
        stage.height = scene.width / ratio + insetY;
        println("H {scene.width} -> {stage.height}");
    else
        stage.width = scene.height * ratio + insetX;
        println("W {scene.height} -> {stage.width}");
    iv.fitWidth = scene.width;
}There are still some glitches, but it roughly works...
[EDIT] Changed to avoid resizing the dimension that the user is changing. Result is more logical but slightly worse... (?)
Edited by: PhiLho on 29 mai 2010 13:24

Cropping when moving and resizing a cropping rectangle

I created a program that crops an image and displays the cropped image but I'm trying to add more functionality
by making it movable and resizable. The rectangle moves and resizes but it only crops an image when user draws the rectangle and not when moved or resized. I know that the X,Y, height and width position of the rectangle would need to be updated but I'm not
sure how I can accomplish this being new to WPF. Below is my user control "CropControl and the code behind. Also, I'm implementing my code using MVVM framework.
XAML:
<UserControl x:Class="Klein_Tools_Profile_Pic_Generator.CropControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:s="clr-namespace:Klein_Tools_Profile_Pic_Generator"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type s:MoveThumb}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>

<ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
<Grid>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeNS" Margin="0 -4 0 0"
VerticalAlignment="Top"/>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeWE" Margin="-4 0 0 0"
VerticalAlignment="Stretch" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeWE" Margin="0 0 -4 0"
VerticalAlignment="Stretch" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="3" Height="7" Cursor="SizeNS" Margin="0 0 0 -4"
VerticalAlignment="Bottom" HorizontalAlignment="Stretch"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE"
VerticalAlignment="Top" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW"
VerticalAlignment="Top" HorizontalAlignment="Right"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNESW"
VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
<s:ResizeThumb Width="7" Height="7" Cursor="SizeNWSE"
VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>

<ControlTemplate x:Key="DesignerItemTemplate" TargetType="ContentControl">
<Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
<s:MoveThumb Template="{StaticResource MoveThumbTemplate}" Cursor="SizeAll"/>
<Control Template="{StaticResource ResizeDecoratorTemplate}"/>
<ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
</Grid>
</ControlTemplate>
</UserControl.Resources>
<Canvas x:Name="BackPanel"
MouseLeftButtonDown="LoadedImage_MouseLeftButtonDown"
MouseMove="LoadedImage_MouseMove"
MouseLeftButtonUp="LoadedImage_MouseLeftButtonUp"
Background="Transparent">
<ContentControl x:Name="contControl" Visibility="Collapsed"
Template="{StaticResource DesignerItemTemplate}">
<Rectangle x:Name="selectionRectangle" Fill="#220000FF"
IsHitTestVisible="False"/>
</ContentControl>
</Canvas>
</UserControl>
CODE BEHIND:
namespace Klein_Tools_Profile_Pic_Generator
/// <summary>
/// Interaction logic for CropControl.xaml
/// </summary>
public partial class CropControl : UserControl
private bool isDragging = false;
private Point anchorPoint = new Point();
private bool moveRect;
TranslateTransform trans = null;
Point originalMousePosition;
public CropControl()
InitializeComponent();
//Register the Dependency Property
public static readonly DependencyProperty SelectionProperty =
DependencyProperty.Register("Selection", typeof(Rect), typeof(CropControl), new PropertyMetadata(default(Rect)));
public Rect Selection
get { return (Rect)GetValue(SelectionProperty); }
set { SetValue(SelectionProperty, value); }
// this is used, to react on changes from ViewModel. If you assign a
// new Rect in your ViewModel you will have to redraw your Rect here
private static void OnSelectionChanged(System.Windows.DependencyObject d, System.Windows.DependencyPropertyChangedEventArgs e)
Rect newRect = (Rect)e.NewValue;
Rectangle selectionRectangle = d as Rectangle;
if (selectionRectangle != null)
return;
selectionRectangle.SetValue(Canvas.LeftProperty, newRect.X);
selectionRectangle.SetValue(Canvas.TopProperty, newRect.Y);
selectionRectangle.Width = newRect.Width;
selectionRectangle.Height = newRect.Height;
private void LoadedImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
if (isDragging == false)
anchorPoint.X = e.GetPosition(BackPanel).X;
anchorPoint.Y = e.GetPosition(BackPanel).Y;
Canvas.SetZIndex(selectionRectangle, 999);
isDragging = true;
BackPanel.Cursor = Cursors.Cross;
private void LoadedImage_MouseMove(object sender, MouseEventArgs e)
if (isDragging)
double x = e.GetPosition(BackPanel).X;
double y = e.GetPosition(BackPanel).Y;
contControl.SetValue(Canvas.LeftProperty, Math.Min(x, anchorPoint.X));
contControl.SetValue(Canvas.TopProperty, Math.Min(y, anchorPoint.Y));
contControl.Width = Math.Abs(x - anchorPoint.X);
contControl.Height = Math.Abs(y - anchorPoint.Y);
if (contControl.Visibility != Visibility.Visible)
contControl.Visibility = Visibility.Visible;
private void Image_MouseMove(object sender, MouseEventArgs e)
if (moveRect)
trans = selectionRectangle.RenderTransform as TranslateTransform;
if (trans == null)
selectionRectangle.RenderTransformOrigin = new Point(0, 0);
trans = new TranslateTransform();
selectionRectangle.RenderTransform = trans;
trans.Y = -(originalMousePosition.Y - e.GetPosition(BackPanel).Y);
trans.X = -(originalMousePosition.X - e.GetPosition(BackPanel).X);
e.Handled = false;
private void LoadedImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
if (isDragging)
isDragging = false;
if (contControl.Width > 0)
//Crop.IsEnabled = true;
//Cut.IsEnabled = true;
BackPanel.Cursor = Cursors.Arrow;
contControl.GetValue(Canvas.LeftProperty);
// Set the Selection to the new rect, when the mouse button has been released
Selection = new Rect(
(double)contControl.GetValue(Canvas.LeftProperty),
(double)contControl.GetValue(Canvas.TopProperty),
contControl.Width,
contControl.Height);

Hello HotSawz,
The ResizeThumb and MoveThumb is not in your code so I cannot compile. Anyway, it is not the problem.
Anyway, can you clarify more details about "it only crops an image when user draws the rectangle and not when moved or resized", it is already normal behavoir for you to draw a rectangle and then move it. What kind of action do you want? Do you
mean some controls like this:
http://www.codeproject.com/Articles/23158/A-Photoshop-like-Cropping-Adorner-for-WPF
Best regards,
Barry
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Image select, resize and locally store (flex3 air example)

Hi there,
After a few days of struggling with images, resize functions
and file dialog boxes I created a nice example application that
shows how you can select an image, resize it and save the resized
image in the application storing directory.
I hope you can profit from it.
Greets, jacob
example code for flex 3 air.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.graphics.codec.PNGEncoder;
public var imageFile:File;
public var fileresultimage:Object;
public var fileresultlabel:Object;
// File.applicationStorageDirectory gets you to the local
storage dir
//On Windows, this is the "projectname" directory
//(for example, C:\Documents and Settings\application
data\projectname).
// On Mac OS, it is /Users/userName/Documents.
public var docsDir:File = File.applicationStorageDirectory;
public function
imageFileDialog(image:Object,label:Object):void
fileresultimage=image;
fileresultlabel=label;
var imagesFilter:FileFilter =
new FileFilter("Foto (*.jpg, *.gif, *.png)",
"*.jpg;*.gif;*.png");
if(imageFile==null)
imageFile = new File();
imageFile.addEventListener(Event.SELECT, imageSelected);
imageFile.browseForOpen("Select an Image",[imagesFilter]);
// if there is a file selected
public function imageSelected(event:Event):void
var newFile:File = event.target as File;
//if there is a file object on the screen
if(fileresultimage!=null)
fileresultimage.source=imageFile.url;
//if there is a label object on the screen
if(fileresultlabel!=null)
fileresultlabel.text=imageFile.url;
if (newFile.exists==true)
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
handleImageComplete);
loader.load(new URLRequest(imageFile.url));
// when load of the selected image is complete we save a
smaller version of it.
public function handleImageComplete(event:Event):void
var loader:Loader = Loader(event.target.loader);
// width and heigt of selected image
var originalimgwidth:Number=event.target.width;
var originalimgheight:Number=event.target.height;
//put original image into bitmapdata
var bitmapje:BitmapData;
bitmapje=new BitmapData(originalimgwidth, originalimgheight,
true, 0x00000000);
//bitmapje.draw(loaderInfo.loader.content,null,null,null,null,true);//null
object reference
bitmapje.draw(loader.content,null,null,null,null,true);
// call the resize function and give the original
image,maxx,and maxy with it.
var thumb:BitmapData=resizeimage(bitmapje,150,150);
var newimagefile:File=new File();
// T = Thumbnail
// 1 = next id in the db
// for now we use a random number
var random:Number= Math.random();
random = Math.ceil(random*100);// to get a positive number
var filenameForSave:String="T"+random; //new filename;
newimagefile=docsDir.resolvePath("Thumbs/" + filenameForSave
+ ".png"); //image path
var stream:FileStream = new FileStream; // create new
filestream
stream.open(newimagefile, FileMode.WRITE); // open
filestream
var data:ByteArray = encodeToPng(thumb); // convert
bitmapdata to a png bytearry
stream.writeBytes(data, 0, data.length); // writing the
image
stream.close();
// show the saved thumb
savedthumb.source=newimagefile.nativePath;
bitmapje=null;
thumb=null;
// resize function
private function
resizeimage(image:BitmapData,maxx:Number,maxy:Number):BitmapData
var bmp:BitmapData =image;
var true_width:Number = bmp.width;
var true_height:Number = bmp.height;
var resize:Boolean=false;
if (true_width>maxx) resize=true;
if (true_height>maxy) resize=true;
if (resize==true)
var width:Number=maxx;
var height:Number = (width / true_width) * true_height;
true_width=width;
true_height=height;
if (true_height>maxy)
height=maxy;
width = (height/true_height)*true_width;
else
width=true_width;
height=true_height;
else
width=true_width;
height=true_height;
//new calculated width and heigt relative to the given maxx
and maxy.
width=Math.ceil(width);
height=Math.ceil(height);
//create a new image object with the calculated widht and
height for the smaller image
var mysmallimage:Image=new Image();
mysmallimage.width=width;
mysmallimage.height=height;
//new matrix for smaller image
var m : Matrix = new Matrix() ;
//scale the matrix to the correct sizes.
m.scale( mysmallimage.width / bmp.width, mysmallimage.height
/ bmp.height ) ;
//draw the image into the image object
mysmallimage.graphics.beginBitmapFill( bmp, m, false, true )
mysmallimage.graphics.drawRect( 0, 0, mysmallimage.width,
mysmallimage.height ) ;
mysmallimage.graphics.endFill();
//put the smaller image into bitmapdata so it can be
returned.
var littlebitmapdata:BitmapData=new
BitmapData(mysmallimage.width,mysmallimage.height,true,0x00000000);
littlebitmapdata.draw(mysmallimage);
// set the temporary small image to null so the GC can
remove it from the memmory.
mysmallimage=null;
bmp=null;
//returning the small image.
return littlebitmapdata;
// encoder to png
private function encodeToPng(bmd:BitmapData):ByteArray
var png:PNGEncoder= new PNGEncoder();
return png.encode(bmd);
]]>
</mx:Script>

<mx:Image id="myimg" x="10" y="55" width="314"
height="227" verticalAlign="middle" horizontalAlign="center"/>
<mx:TextInput id="imageurl" x="53" y="303" width="160"
maxWidth="160"/>
<mx:Button x="221" y="303" label="Bladeren"
click="imageFileDialog(myimg,imageurl)"/>
<mx:Image x="346" y="55" id="savedthumb"/>
<mx:Text x="23" y="0" text="Original image with limit
width and height to show it on the screen." height="47"
width="177"/>
<mx:Text x="346" y="0" text="Local stored thumbnail"/>
</mx:WindowedApplication>
To bad the attach code button still isn't fixed :(

Hi there,
Will you be able to provide the backend script for saving the
file data?Will you be able to provide the backend script for saving
the file data?
This example is created for a desktop application. Saving the
file is included in this example, it saves in the application
storage directory.
// File.applicationStorageDirectory gets you to the local
storage dir
//On Windows, this is the "projectname" directory
//(for example, C:\Documents and Settings\application
data\projectname).
// On Mac OS, it is /Users/userName/Documents.
If you attempt to use certain functionality in a website, you
need other functionality for storing the image on the server. There
are lots of examples on that one.. Perhaps i need it in the future.
If i do i will post an example on the forum.
Also, may I post your link to other forums, so that others may
benefit?
Sure you may post the example on other websites and forums.
I found it difficult to find nice examples, so the more the
better ;)
Just put underneath the example something like:
Created By: Jacob Hingst From Holland
No copyright attached, so free for your use.

Resized and shrunk down image is distorted on ios/android

It should be something very simple that just dont know. When i proprtionally resize large image and display it on my mobile apps (ios & android) the image is slightly distorted and some smaller texts are little hard to read, or just doesnt look good.. As3 on desktop doesnt show it, and seems like only on mobile apps it happens. I am using remote jpeg images loaded as bitmap and changing the width and height, is there something i can do to make it resize more correctly? Thanks

You could try applying smoothing to the image.
_urlRequest=new URLRequest("pathtofile");
_loader=new Loader;
_loader.load(_urlRequest);
_loader.addEventListener(IOErrorEvent.IO_ERROR, function(e:IOErrorEvent):void{ trace(e) });
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,smooth);
private function smooth(e:Event) {
var bit:Bitmap = e.target.content;
if (bit != null) {
bit.smoothing = true;

Cropping an image to a specific but non-standard size

Can anyone tell me how to crop an image to a size other than the standard sizes listed in the crop tool (e.g., 11 x 14)? This is easily done in PS Elements, but I'd like to avoid exporting and creating a duplicate of a large file just to crop for printing.
Also, is there a way to display the size of an image in inches as opposed to pixels? this would be handy after it is cropped.
Thanks!

Just click into the width and height boxes in the crop tools dialogue box and check Constrain constrain cropping tool to:
You set the size in inches or whatever on export. When the file is within Aperture it has no size other than pixels.
Cheers,
Terry

Resize and crop images to a specific width and height

Similar Messages

Maybe you are looking for