Cropping Images

Choose

Cropping Images

updated by rck, 2005-06-28

One reason, why Typo3 is as successful: It is integrated. It has a workflow, you don't have to leave your web browser while creating your content.

Most CMSes have some sort of image upload capability. But, well, that's about it. You can't just take the picture of your digi cam, which might be more than thousand pixels wide and tall and put it up your web site. No, you need to resize it first. And crop it.

1 | 2

The Cropcanvas class
Heart of Crop Canvas is the Cropcanvas class. According to the inline documentation, Andy did it back in 2003. The class is very easy to use and coded cleanly. While instantiating the class, you can tell whether or not you'd like to activate the debugging mode which outputs every occuring error on the screen. Having done that, you load the Image you'd like to crop with "loadImage". There's also a "loadImageFromString" method which you can use for database-blobs. After cropping it with cropBySize, cropToSize, etc., you can either save it to disk or put it on screen without saving it first. Neat!

The Cropcanvas class

Heart of Crop Canvas is the Cropcanvas class. According to the inline documentation, Andy did it back in 2003. The class is very easy to use and coded cleanly.

While instantiating the class, you can tell whether or not you'd like to activate the debugging mode which outputs every occuring error on the screen.

Having done that, you load the Image you'd like to crop with "loadImage". There's also a "loadImageFromString" method which you can use for database-blobs.

After cropping it with cropBySize, cropToSize, etc., you can either save it to disk or put it on screen without saving it first. Neat!

The Cropinterface class
Basically, the cropinterface class generates a lot of html and JavaScript code to bootstrap Zorn's Drag N Drop library. The HTML output here isn't as clean as the code I saw in the Cropcanvas class, one would probably want to rewrite it. The font-sizes are hard coded for example. And one might want to have a different border, not the yellowish one. As far as I can tell, the display part is separated from the JavaScript logic. So if you want to have a different presentation, you'd just overwrite the loadInterface method.

The Cropinterface class

Basically, the cropinterface class generates a lot of html and JavaScript code to bootstrap Zorn's Drag N Drop library. The HTML output here isn't as clean as the code I saw in the Cropcanvas class, one would probably want to rewrite it.

The font-sizes are hard coded for example. And one might want to have a different border, not the yellowish one. As far as I can tell, the display part is separated from the JavaScript logic.

So if you want to have a different presentation, you'd just overwrite the loadInterface method.

1 | 2

A web interface
The Cropcanvas class