Vanilla Javascript Image Crop Component

Vanilla Javascript Image Crop Component

Released 4 years ago , Last update 2 years ago

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

Questions & Comments


Or enter your name and Email
  • TW Torben Wilhelmsen 2 years ago
    Hi Victor. I like your cropper. But I’m missing coordinates input for the initialise. In the pipeline?
    • Victor Stanciu Publisher 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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 2 years 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!
  • MS Mark Stanz 2 years ago
    Can I try the Vanilla javascript image crop component before I purchace a licence? Also, is the licence price $9.99 as a one-time payment only?
    • Victor Stanciu Publisher 2 years ago
      Hi Mark, You may download and try the minified version from the demo page, sure. The $9.99 license is a one-time payment only, but is only valid for a single project. If you want to use the component in more than one project, you will have to either buy a license for each project, or buy the Developer license ($29.99), which allows you to use the component in an unlimited number of projects. Have a nice day!
  • B Borja 2 years ago
    I think it actually does not work, even with the examples on your site I can only create a point in the bottom left corner, no matter which coords I pass in the createCropArea function
    • Victor Stanciu Publisher 2 years ago
      Hi Borja, You shouldn't call the createCropArea function directly, that's an internal function that the cropper calls itself. You should only interact with the cropper via the callback method.
    • B Borja 2 years ago
      I thought it would be possible because I need to initialize the cropper in a specific x/y width/heigth position.
    • E Evelina 2 years ago
      Hi any development on that? I am also calling the createCropArea method on the new cropper but it doesn't reflect the dimensions that I give. It stays as a dot in bottom left corner
  • S Stephan 2 years ago
    Is there a way to destroy the cropper overlays and viewfinder once the image has been cropped?
  • JK Jesper Kold-Hansen License holderHosted License
    1 month support
    Purchased on Nov 19, 2015
    2 years ago
    Hi. I was wondering how to you handle large images, that have been shrunk either with css or attributes?
    • Victor Stanciu Publisher 2 years ago
      Hi Jasper, If the image has been resized, and you know both the full image size and the resized dimensions, all you have to do is divide the two, and apply the resulting ratio to the crop coordinates. So, for example, let's say you have a 4000x3000px image that has been resized to 1000x750px. This results in a ratio of 4x, which you can use to multiply all the coordinates that result from the cropper (x, y, width and height). You can then use these adjusted coordinates to actually perform the image crop. Please let me know if this answers your question.
    • JK Jesper Kold-Hansen 2 years ago
      I actually build it into the js, so that it will find the original size of the image, and then calculate the crop depending on that.
  • A Alex 2 years ago
    If you set the ratio, and pull the side Handley, the croparea goes beyond pictures
  • M Manix 2 years ago
    Hello, I have built mobile support for your library. It is literally about 5 lines of code. If you are interested contact me at manix_bizz@abv.bg
  • A adam 2 years ago
    The Drag doesn't seem to work on mobile?
    • Victor Stanciu Publisher 2 years ago
      I haven't tested the library on any mobile device, sorry. Only desktop browsers are currently supported.
You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.