Jump to content

How to save image with good proprtions [if nessecary, I'll pay a small amount]


Recommended Posts

Hi!

 

crop.png

 

This picture shows the crop tool for the users.

The picture will be after cropped and resized: 300*370 px

How can I do so the picture will be 300*370 px in a nice quality and good shape when the cropping and resizing is done?

 

I mean the proportions must be right when the user crop and when I save because I make the picture smallre with HTML/CSS when the user will crop.

 

please help me with this!

In order to maintain quality (ie avoid distortion) you MUST restrict the cropping to some pecentage of your final image ie 200% 331% whatever. Any time you resize am image in something other than proportionate values, your risk of a distorted image is high.

 

Depending upon the code you are using to crop, there may be laying beneath the sufrace, the ability to restrict the crop dimensions to a percentage of your final desired product.

 

 

The problem is:

I can show the whole picture for the user which will crop it, but if the user will crop 300*370 px of a image when the original size is 1000*1300px. Then I will get a really little cropped part of the image, and I will only see a half of a face if the user is unlucky.

So the image will be cropped but even resized to a smaller image but here is the problem, How do I know how much I need to resize the picture and how do I need how much I need to crop the picture?

 

If I show the picture in a smaller size in the cropping tool, and then the user is done and have chosen the X and Y for the rectangular cropping shape, if I now am going to crop the picture, then I have to change the X and Y , because on the smaller image the X position may be 200px but on the big picture it will be 600 px; and I don't know how much I will resize the picture?

The finish picture will be exactly: 300px*370px

Ok, no idé what to do now...

I don't now how to make the images 300*370 px in a good quality and not to small on the width etc.

 

The problem is still how to show the picture to the users so I can calucalte it right and get a good shape of the images at the end...

 

PLEASE help :/

The user is uploading the original image, and then he/she comes to the cropping tool, so there is different image width and height, because the user is uploading.

 

I will payback if you can help me =)

1. go to this page (http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/) and read this...

Options

 

ratioDim obj

    The pixel dimensions to apply as a restrictive ratio, with properties x & y.

 

and this...

Select area ratio

 

You can apply a ratio to the selection area, this example applies a 4:3 ratio to the select area.

Display code as plain text

HTML:

 

  1.

      <img src="test.jpg" alt="Test image" id="testImage" width="500" height="333" />

  2.

     

  3.

      <script type="text/javascript" language="javascript">

  4.

          Event.observe( window, 'load', function() {

  5.

              new Cropper.Img(

  6.

                  'testImage',

  7.

                  {

  8.

                      ratioDim: {

  9.

                          x: 220,

  10.

                          y: 165

  11.

                      },

  12.

                      displayOnInit: true,

  13.

                      onEndCrop: onEndCrop

  14.

                  }

  15.

              );

  16.

          } );

  17.

      </script>

 

Then edit your file accordingly for a 300 w x 370h  ...

X = 300

Y =370

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.