jamesssooi / croppr.js Goto Github PK

I'm trying to set a precalculated crop bounding box. But using the bounding box values i've calculated using opencv (which are correct, or correct enough) they dont correspond with what i'm expecting.

When using startSize the resulting cropping mask is smaller than expected. Also the aspect ratio does not seem to match.

When using resizeTo the resulting corpping mask is a lot larger than expected. It then extends beyond the croppr wrapper.

When I try to both resize the cropping mask using resizeTo and move it to the correct location using using moveTo neither the location nor the size are correct. It even seems like there are 2 masks drawn.

When i manually set the cropping mask and request the value using getValue the value returned is pretty much (ignoreing a few pixels difference) what i expect it to be and try to set programmatically...

Whats going on here? Am i missing something?

Context:
Image Real size: 1080 × 1080

cropper = new Croppr(document.querySelector(".cropper-wrapper img"), {
    startSize: [1050, 358, 'px'],
    aspectRatio: null,
    onInitialize: function(instance) {
      instance.resizeTo(1050, 358).moveTo(1, 366)
    }
});

Expected mask output according to opencv (ignore the strange colors):

It would be really useful to have a setValue method:

data = {x: 20, y: 20: width: 120, height: 120}
croppr.setValue(data);

How to export a cut picture?

is it possible to get the base64 data of the cropped image? if so how ? thank you.

Hi,

I'm using Croppr to provide my users a basic cropping tool. The only issue I'm having is that the page where the Croppr element is on, is scaled based on the browser width (and to add complexity the element can be scaled aswell). This leads to incorrect selection values. Using returnMode: raw returns the correct values, but I'm unable to select the entire image. Here's an example using the demo, with the center <div> scaled down to 0.85:

I've tried setting the inversed scale in the onInitialize hook like so onInitialize: instance => instance.scaleBy(1.25) but it seems that this is reset as soon as you resize/move the selection window.

Just a small reminder that the link-element on the demo-site still uses src instead of href. That was already fixed in the readme.md.

Thanks for this wonderful little image cropper 👍

import Croppr from 'croppr';

[ts] Module '"/node_modules/croppr/index"' has no default export.

Steps to reproduce:

1. Set a min-size of, say, 300x300
2. Click and drag anywhere outside the current selection
   Result: the current selection vanishes and a new selection appears, well under the min-size limits. This basically allows the user to submit an image smaller than the required minimum.
   

When I insert the picture and I resize my window the cropper takes another width and height****

I am very excited to see your library! I'm just running into one issue trying to set it up. I'm trying to instantiate Croppr on an image, and though the image has css on it to make it fit on the screen, the Croppr instance displays a little bit bigger. (Looks like maybe it displays the image at its original size?)

Is there any way to set the size of the Croppr view when the image itself is bigger than the screen or the div you want to use it in?

Here is a screenshot to show you what I'm seeing. Before instantiating Croppr, the image is fit into the div. After instantiating Croppr, the image is overflowing in the div.

Awesome library in general, by the way :)

Hi.

@jamesssooi your Croppr.js is really cool, but using onUpdate event is too frequent for calculate new image.

Can I use "cropEnd" event (or something like that) when user has stoped crop?

The combination of aspectRatio and minSize is buggy when the ratio is vertical.

cropper with
aspectRatio: 1.3333333333333333
minSize: [ 300, 400, "px" ]
startSize: [ 1200, 675, "px" ]

The minimum crop result should be 300 * 400
But the cropper "snaps" from 400 * 533 to 300 * 533

I can initialize the croppr with an img tag that already has a src attribute and that works well.

However, if I try to set the image src later, my src string gets turned into an object once passed into the setImage method. That object has the src property with the correct string, so to fix this, I had to modify the method as using the src.src value. Am I doing something wrong here? I'd rather not make a modification to your method.

Here is me passing in the string:

if(donationCategory.image) { console.log(donationCategory.image.url); donationCatCroppr.setImage({src: "https://nodechef-bucket.s3.amazonaws.com/dcad4d90b1c8ee5daedeba058361c85d_DonationCategory.png"}); $('.donation-category-image-container').show(); }

Here is the setImage method:

key: 'setImage', value: function setImage(src) { console.log(src); var _this2 = this; this.imageEl.onload = function () { _this2.box = _this2.initializeBox(_this2.options); _this2.redraw(); }; this.imageEl.src = src; this.imageClippedEl.src = src; return this; }

When you log src you get {src: "https://nodechef-bucket.s3.amazonaws.com/dcad4d90b1c8ee5daedeba058361c85d_DonationCategory.png"}

Any idea why?

I have tried returnMode: 'real' and minSize : [300,300,'px'] but the point is even if the photo pixel size os 1600,900 the cropper takes the minsize based on the div or elemnt dimensions i.e. canvas dimensions. Can u please tell me how to fix the minsize based on the image pixels and not thr canvas pixels. Reply would be appreciated

At first and second images option minSize set [322, 220, 'px']. If image have a 100x100 px resolution and minSize [70, 70, 'px'] and postion of croppr-region 0, 0 px, you can`t take a top left corner of croppr-region and move him to top right corner of image because image been smaller than minSize.

Hi James, Great project, this was just what I was looking for. I wanted to use this with HTML5 video but it's not supported. Right now I am putting an opaque image on top of my video which works just fine. Do you intend to support video in the future?

Thanks! Sabba

I've been reviewing the code to check if it's possible to apply Croppr.is to a canvas.
Would this be possible?

I understand that the aim of Croppr is get the size selection and then crop later.

When I both set aspectRatio and startSize，startSize option is useless.

I understand how to set Croppr up, but how do I actually get the cropped image after the user is done cropping the image?

Just what the title says. I like Croppr because it's very lightweight, and straight forward. Other cropping libraries are trying to do everything, but all I need is a simple selection like this library provides, however one feature that I would like would be circular selections.

I may try and throw together a PR as well, if I get a chance.

Hi, i change the image source dynamically, there is a method for that? because i always get this error:

vendor.js:1704 ERROR TypeError: Cannot read property 'replaceChild' of null at Croppr.createDOM (build/0.js:958) at Croppr.initialize (build/0.js:913) at HTMLImageElement.CropprCore.element.onload [as __zone_symbol__ON_PROPERTYload] (build/0.js:903) at HTMLImageElement.H (polyfills.js:3) at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (vendor.js:4974) at t.invokeTask (polyfills.js:3) at r.runTask (polyfills.js:3) at e.invokeTask [as invoke] (polyfills.js:3) at p (polyfills.js:2)

Hey! Really love the project, but just wanted to know if it is possible to set the custom coordinates of the crop region after the croppr object was loaded OR on inital load.

For example, if I have an image that is 500x500px and crop region that is 100x100px, I would like to set the crop region to appear in the bottom left corner by setting start x, y, width, height coordinate parameters.

I have tried doing MyCropprObject.box.set(x1, y1, x2, y2), however this leads to some unexpected side-effects. To save myself some headache I thought it's maybe worth asking here first.

P.S. happy to fork and implement it, just want to get an idea how it could theoretically work or if there is an already existing solution.

When trying to access the options attributes of a Croppr instance, the TypeScript compiler raises an error saying the the property does not exist on the type. Could it be possible to add typings for this (or expose a method to change the options dynamically) ?

Hi,

i created sample for react + react-bootstrap , maybe it will be useful for someone...

CropprReact.zip

It would be great if this worked on iOS, Android, and other touch devices!

When you call the destory method doesn't unbind the event listeners (default and user optioned one's like onInit etc) and it should. This is problematic when using it with spa frameworks like react as it causes side effects when mounting and mounting components (since the page isn't reloading). It's part of a two step problem we've identified that is causing a race condition.

Hi, how can i make more than 1 selection on 1 image?

Cropping is awesome, and 1/2 the story of the most common image manipulations. The other being rotation. Not even free rotation. Just at 90 degree increments!

Will you translate this library into a typescript version anytime soon ?

We are encountering a race condition when uploading large images in our SPA. Making the user defined event listeners as well as the function to load the image asynchronous will allow the image to fully load into the canvas before the cropper kicks in. If we await these it seems to fix the race condition.

I'm able to crop images on the client side using this library, but how do I upload the cropped images to the server and then display that cropped image to the client?

After an hour of torment, I saw that CSS is not connected correctly. Edit "<link src="path/to/croppr.css" rel="stylesheet"/>" to "<link href="path/to/croppr.css" rel="stylesheet"/>"

when I compile my code without the skipLibCheck option I get the following error:

66:5 Property '2' of type '"px" | "%" | undefined' is not assignable to numeric index type 'string | number'.
    64 |     0: number,
    65 |     1: number,
  > 66 |     2?: 'px' | '%'
       |     ^
    67 |   }
    68 | 
    69 | }

I want to show multiple image and be able to get the crop on each image. Any information on how I can achieve this? Adding more then one image and adding the class only show the crop on one of them. Any help would be much appreciated!

I am getting a TypeError: this.box is undefined error when I do the following:

var id7=new Croppr('#id7',{aspectRatio:1,startSize:[136,136],onCropEnd:function(value){$('#id3').val(value.x);$('#id4').val(value.y);$('#id5').val(value.height);$('#id6').val(value.width);}});
id7.resizeTo(136,136);
id7.moveTo(10,9);

I am not sure why Box is not initialized on creation. I am trying to set the crop window (from a previously stored crop) on the original image. Happens on both resizeTo and moveTo

Any ideas?

Hi,

just a simple question about Croppr.js, is it possible to always resize from center when resizing?

Thanks,
Martin

I couldn't find a method for destroying the cropper instance and restoring the image element as it was. Can this be done or could this be implemented?

Hi! How can i change the cropper region as a circle when aspect ratio is 1:1?

Hi James,

Apparently the value returns with negative numbers for x and y when dragging cropping zone all the way to top or left. I have a quick demo here. It happened only when I have 21:9 ratio, not sure if it's the case.

https://jsfiddle.net/wo6vf8zr/3/

Options used:

• aspectRatio: 1
• onCropEnd: simple function that simply prints on the console the data parameter

When aspectRatio is 1, it is expected to have a cropping region that is a perfect square, i.e., width must be equal to height.

I have found a difference. width is slightly bigger than the height. The difference varies from 1 to 3. U have ran some scenarios and found the following data:

{x: 653, y: 2550, width: 1474, height: 1473} 
{x: 1942, y: 1094, width: 1474, height: 1473}
{x: 1942, y: 1009, width: 1643, height: 1642}
{x: 1942, y: 881, width: 1901, height: 1899}
{x: 1942, y: 881, width: 2333, height: 2330}
{x: 4199, y: 3211, width: 27, height: 27}
{x: 2430, y: 1488, width: 2329, height: 2327}
{x: 901, y: 662, width: 2329, height: 2327} 
{x: 3621, y: 2207, width: 596, height: 595}

Also important to mention: the height is never the height of the picture - in my scenarios I'm using a rectangular picture of 5334x4032 pixels. Maximum height I get is always 5 pixels less even if I enlarge the cropping area as much as possible.

I will run some extra scenarios in order to determine correctly why this is happening.

I am beginning to setup a project to use croppr.js where app is bundled with Webpack, but keep running into the following error when webpack runs:

ERROR in ./node_modules/croppr/dist/croppr.js
    Module build failed: Error: Couldn't find preset "es2015-rollup" relative to directory

When I do add "babel-preset-es2015-rollup": "^3.0.0", to my package.json file, I then run into issues with babelHelpers.

Has anyone else been able to successfully bundle Croppr.js with webpack?

Node version: 8.9.4
Webpack: 3.12