webbhelp Posted January 19, 2011 Share Posted January 19, 2011 Hi! 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! Quote Link to comment Share on other sites More sharing options...
Maq Posted January 19, 2011 Share Posted January 19, 2011 If you would like to pay someone to do this for you I can move this thread into the "Freelance Section". Just let me know. Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 19, 2011 Author Share Posted January 19, 2011 It isn't a payment mission, if somebody can help me to the right way I can do this by my own, BUT this is in a really hurry that's why I am so desperat to get this to work Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 19, 2011 Author Share Posted January 19, 2011 Somebody :/ please! Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 20, 2011 Author Share Posted January 20, 2011 You should be professionals, come on I think you know it actually Quote Link to comment Share on other sites More sharing options...
trq Posted January 20, 2011 Share Posted January 20, 2011 What exactly is the issue? Do you have any code? Quote Link to comment Share on other sites More sharing options...
litebearer Posted January 20, 2011 Share Posted January 20, 2011 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. Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 20, 2011 Author Share Posted January 20, 2011 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 Quote Link to comment Share on other sites More sharing options...
litebearer Posted January 20, 2011 Share Posted January 20, 2011 I STRONGLY suggest you look here http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/ Especially its ability to "Allows dimension ratio limited crop areas" Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 20, 2011 Author Share Posted January 20, 2011 I actuallt use that JS cropper! I Will look when I come to computer! Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 20, 2011 Author Share Posted January 20, 2011 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 :/ Quote Link to comment Share on other sites More sharing options...
litebearer Posted January 20, 2011 Share Posted January 20, 2011 who is supplying the original images? Quote Link to comment Share on other sites More sharing options...
webbhelp Posted January 20, 2011 Author Share Posted January 20, 2011 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 =) Quote Link to comment Share on other sites More sharing options...
litebearer Posted January 20, 2011 Share Posted January 20, 2011 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.