How to make a picture cropper (only client-side concerned)?

How to 开发者_如何学Cmake a picture cropper? Only plain-vanilla JS!

You want plain vanilla JS only, but still: There is a Prototype/Scriptaculous based cropper available:

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Obviously however, the actual cropping of the image file is done using PHP. I don't think there is any way to do that in Javascript. No sane way, anyway. :)

Use this!

Pure JavaScript Image Crop Component

• Easy to use, no special markup needed (jump to instructions).
• ZERO dependencies. Doesn't need jQuery or any other framework, but plays well with them.
• Compatible with every major browser, including Internet Explorer 7!
• Configurable aspect ratio, minimum and maximum dimensions, etc.
• Small footprint (just ~8.1 KB when minified).

Instructions

1. Include the JS and CSS files:

2. Add your image to your HTML document. Absolutely no other HTML markup is required:

3. Initialize the Cropper, and you're good to go!

   document.getElementById('image').onload = function () { new Cropper(this, { // options }); }

This tool can make cropped images : http://www.pixastic.com/. It is Open source and downloadable, so you might get inspiration from it.