Vanilla Javascript Image Crop Component

Vanilla Javascript Image Crop Component

Released 3 years ago , Last update 2 years ago

Simple to use, plug-and-play JavaScript component for image area select and cropping. No framework needed!

Demo gif. If this image doesn't appear, click the "View demo" link in the upper right corner of this page

View demo page

This is a framework-independent JavaScript component for image cropping and area selection. Its behavior is very intuitive, modeled after the selection tools in popular image editing software, like Photoshop, GIMP, etc.

  • Easy to use, absolutely no special markup needed, just the good old <img> tag.
  • Has 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 (~8 KB when minified).
5.0
  • 5 4
  • 4 0
  • 3 0
  • 2 0
  • 1 0
4 Reviews Read Reviews

Pricing

14 day 14-day money-back guarantee

$9.99

Hosted License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

  • 1 month support

Need custom services for this product? Get a quote

Available options

This is the list of options you can use to better interact with the script. You use them by providing name: value pairs when instantiating the Cropper. An usage example for each option is included below, and you can also see them all in action on the demo page.


Option name: update Type: Function Description: A function the Cropper calls automatically whenever the crop coordinates are changed.

new Cropper(image, {
    update: function (coordinates) {
        /**
         * Do something with the crop coordinates, which are passed as a simple JS
         * object with four keys:
         * {x: 100, y: 200, width: 400, height: 200}
         */
        console.log(coordinates);
    }
});

Option name: ratio Type: Object Description: Use this option if you want to restrict the aspect ratio of the crop area.

new Cropper(image, {
    ratio: {
        width:  16,
        height: 9
    }
});

Option name: minwidth / maxwidth / minheight / maxheight Type: Integer Description: Use any of these options to force the crop area to gave the desired minimum / maximum width / height.

new Cropper(image, {
    min_width:  400,
    min_height: 300,
    max_width:  800,
    max_height: 600
});

Setup / installation

Include the JS and CSS files:

<script type="text/javascript" src="cropper.js"></script>
<link rel="stylesheet" href="cropper.css"></div>

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

<img src="your-image.jpg" id="image" />

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

document.getElementById('image').onload = function () { 
     new Cropper(this, {
        // options 
     }); 
}
2 licenses, starting from From » $9.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services


Or enter your name and Email
  • TW Torben Wilhelmsen 1 year ago
    Hi Victor. I like your cropper. But I’m missing coordinates input for the initialise. In the pipeline?
    • Victor Stanciu Publisher 1 year ago
      Hi Torben, I'm glad you like my component. I'm sorry to say, I'm having trouble understanding your question. Could you please clarify the issue you are experiencing? Thanks!
    • TW Torben Wilhelmsen 1 year ago
      Sorry, for this late reply: I want to keep the original image as reference in my cms, so I can have multiple, still editable instances of the same image. Thus, when the Cropper is initialized, it show the cropper-area I figured something like: C = new Cropper ( image, { crop: {x: 100, y: 200, width: 400, height: 200}, ratio: {width:12,height:8}, update: function(coordinates){ //console.log(coordinates) }, }); This is what I do right now with jCrop (which I really want to get rid off – along with jQuery).
  • L Lina 1 year ago
    Hej Victor. I have been struggling with the cropping function for a while. We have bought the cropper and also have our own update function. It works fine but now I need to be able to manually input width and height. I can't seem to figure out how to create a cropping area on key input. I would appreciate some help!
    • Victor Stanciu Publisher 1 year ago
      Hi Lina, At the moment you cannot control the cropper other that via mouse movements, but I will add a method that will allow you to send crop coordinates to the component via JS soon. Thank you!
  • MA Moayad Abdulraheem 1 year ago
    Can I try the Vanilla javascript image crop component before I purchace a licence? if no, i would ask if it's works with angular js properly? and can we set the ratio and min/max width options together?
    • Victor Stanciu Publisher 1 year ago
      Hi Moayad, You may download and try the minified version from the demo page, sure. I don't have any experience using Angular, so I can't vouch for the component's compatibility. However, since it's just vanilla JS and is a self-contained component, there shouldn't be any problems. Please use the script from the demo page and test. Yes, the ratio and min/max options can be used together. Have a nice day!