0

First of all, I'm very new to javascript. I'm trying to develop a javascript function which takes an image and returns a cropped version of that image. By looking around on google I've found that I probably need to use a canvas in some way to accomplish this task. But does that mean I have to display the image on my page?

I've also looked at different javascript image processing libraries for a similar function, for example Pixastic's Crop, but I have no idea how to use it to solve my particular problem. So now I'm turning to you guys for help. Please guide me in the right direction!

Thanks!

anony115511
  • 172
  • 2
  • 2
  • 13

3 Answers3

1

Pixastic's Crop solution seems easy to implement and uses the canvas. It would do the job as long as you don't need to support Internet Explorer 7 or 8.

Otherwise, you can simply use CSS overflow:hidden; to do a client side cropping.

Pixastic Solution: http://www.pixastic.com/lib/docs/actions/crop/, check out the Example Code tab.

Here is a working example for Pixastic and the CSS solutions: http://jsfiddle.net/EB6P7/1/

I used the jQuery plugin for Pixastic.

--

If you don't need to save the image on the server side I recommand using the CSS solution as it doesn't rely on Javascript and achieve the same result as Pixastic.

If there's anything you don't understand, ask me as I don't know your level in HTML/CSS.

nebulousGirl
  • 1,364
  • 2
  • 13
  • 23
  • As written in the question, I have no idea how to use Pixastic's crop to accomplish the task. If you could show me an example of how it could be done I would be very grateful! – anony115511 Sep 24 '12 at 14:35
  • I'm starting to understand a bit now, but what if I want to use variables? I don't know the exact syntax for javascript, but like var croppedImage = crop(originalImage, x, y, width, height);? – anony115511 Sep 24 '12 at 15:18
  • Here is an example with a JavaScript function: http://jsfiddle.net/EB6P7/6/. Do you know jQuery? I could do a plain JavaScript example if you prefer. – nebulousGirl Sep 24 '12 at 17:50
  • All I know is that it's a javascript library. I would like to have a javascript function without HTML code if possible. A function which takes an image, some coordinates, "physically" crops it and returns the cropped image. Not even sure it's possible.. Thanks for trying to help me! – anony115511 Sep 24 '12 at 20:15
  • Pixastic works with the DOM. As far as I know, the image need to be put in the HTML before using Pixastic. So, it would be impossible to do a crop without using HTML. But there is a function that can convert a canvas into an image (see http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf) So, after Pixastic, you could target the canvas and convert it to an image, but you have to use HTML. – nebulousGirl Sep 25 '12 at 13:35
0

Well if your problem is only cropping and not saving the cropped image, the simplest solution I would say is to position the image using CSS inside a div and show only the cropped area.

If you want to save then I wish you need to use some library on the server side to crop and save

Chandra Sekhar Walajapet
  • 2,534
  • 17
  • 24
  • Well I may not want to save the cropped image right away, but I want to return it from the crop function. So that's not he solution I'm looking for, but thanks! – anony115511 Sep 24 '12 at 14:00
0

Maybe the CSS Clipping feature is a solution for you?

#someImage
{
 clip:rect(50px 100px 130px auto);
}
Bruno Schäpper
  • 1,262
  • 1
  • 12
  • 23
  • Clip, as I've understood it, only displays a part or the image, and does not "physically" crop the image, but thanks! – anony115511 Sep 24 '12 at 14:32