8

Let me summarize the scenario with a picture:

enter image description here

I am trying to make a feature for setting profile pictures in my site.I want to have a page to show the uploaded image in its original size in an image field but the size of the profile picture should be 200*153 so I want that the users can resize the picure and also drag a frame(the frame size is 200*153) to any area of the resized picture that they want to be their profile picture and when they click on the save button just the area that is in the frame be croped and save that area to the server.

Imagine that these are the HTML codes:

<div style="height:150px;width:200px;position:absolute;border:5px solid yellow;z-index:1001;" id="test1"></div>
<img id="test" src="~/Content/01052013626.jpg"/>

Note that the div is draggable and the image is resizeable.

Thank you.

bbb
  • 263
  • 2
  • 4
  • 16
  • 1
    http://stackoverflow.com/questions/6887183/how-to-take-screen-shot-of-a-div-with-javascript – Johan Jul 21 '13 at 12:12
  • @Johan Iwant to take a snapshot from the behind image that is in the border of the div and save it to computer. – bbb Jul 21 '13 at 12:38
  • Why don't you do that on the server-side? – Tengiz Jul 23 '13 at 17:03
  • 1
    @Tengiz: this is probably for a profile headshot of some sort. Some hosts don't have imagemagick or something comparable installed, so HTML5 solutions may be preferred. – Paarth Jul 23 '13 at 17:07

4 Answers4

6

You would begin by positioning the image and the div in the same wrapper div. I would do this because it will allow you to use jquery's coordinate functions on the div more easily rather than the image.

Once you have those coordinates, you can take a cropped section of that image specified by the div's dimensions and coordinates and use this tutorial:

http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

To save that section onto an HTML canvas element. The canvas element can be invisible if you like.

Once that is saved, you follow this answer:

How to save a HTML5 Canvas as Image on a server

to save it to the server.

Community
  • 1
  • 1
Paarth
  • 9,687
  • 4
  • 27
  • 36
1

Ok, First of all you have to use server side language to actually save the cropped image image. I would use Jcrop for the cropping, and then send it to the server for the saving process.

Again, you CAN'T save files on the server with javascript only!

Or Duan
  • 13,142
  • 6
  • 60
  • 65
0

I believe this is almost exactly what you are looking for: jQuery jCrop

Only, instead of saving the file, output it on the screen with a 'forced download' header

Martijn
  • 15,791
  • 4
  • 36
  • 68
  • Does it just crop on the UI, or allows to save too? – Tengiz Jul 23 '13 at 17:07
  • No, it uses php. If you want clientside only, you could use the canvas of html5, but that is not fully supported among browsers. They have an example script. You can alter it to output the data instead of saving it somewhere – Martijn Jul 23 '13 at 17:09
0

You can use this php class to mask an image with a maskingimage of size 200*153. It will exactly crop the exact area using pixel based alpa channel mapping. Wherever the mask image has the alpha Channel 0( Transparent Part ), it will crop by grabbing the pixels of that area and will regenerate the image to the new required size in your case. You will have to keep a mask image of size 200*153 pixel in your server to be used. Here you can also pass the new resized coordinates by ajax calls to backend and crop image accordingly.

https://github.com/lukeissac/Image-Masking-in-php/blob/master/class_lib.php

If you have option to go with server side script it will work. The above link is a proof of concept for the same.