Jcrop | Jcrop - The Javascript Image Cropping Engine | Computer Vision library

I've created a very simple functional example with jcrop that creates a square on an image:

I'm updating Angular version from 7 to 8. But when I build it even though I don't use DOCUMENT, it gives me an error. What could it be that I'm not seeing? I looked through all the files but couldn't find DOCUMENT used with '@angular/platform-browser'. I even checked for '@angular/common'.

I'm just using document here but it has nothing to do with '@angular/platform-browser'. Because it uses it from lib.dom.d.ts.

Hello friends from the world. I have been looking to make this script work, it is intended to help crop an image using coordinates, this but apparently something is failing. Im pretty new to javascript and jQuery but I think I almost got it.

Im getting undefined errors on my value (v) variable.

I have created a system where a user will upload an image, it's resized to a certain width and then the user can crop the image (was using imgAreaSelect but upgraded to Jcrop to add mobile usage).

I have this all working fine. Once the user moves the selector of Jcrop to where they want and chooses the save button I have jQuery write some fancy CSS to show the portion of the image the user wants (the rest is hid via overflow: hidden) plus more form to add photo credit and other information about the photo.

This again, works great... on a desktop. The image is full size on a mobile device and isn't responsive so you cannot see the majority of the photo. I've been trying to wrap my head around this for a while now (other than disabling the preview photo). Is there any way to get my method responsive?

I am trying to create a page on my site that uses Jcrop to edit and then save the edited images.

My issue is that when I load the page on Chrome or Microsoft Edge the jcrop-holder is duplicated and the image appears on the browser twice.

I cannot work out what is the issue, any help would be much appreciated!

Bellow is my code:

I am implementing designer functionality using FabricJS in my side. My Idea is to set the background image using setBackgroundImage from fabric, also i add specific area of transparent rectangle with size and position fetch from JCrop. Now come to my question, i want to restrict the object placement within that specific area of transparent rectangle. Let say i want to add text/image/shapes that should be in that limited area, i able to implement the background image, position of transparent rectangle and even circle shape object but i unable to find details to limit object place it inside transparent rectangle and only in that region.

Here is my below code and working fiddle, If you see it in fiddle the image where you need to select the cropping portion and below that canvas background with transparent rectangle which is the one of same like crop selection. Now i want to limit the object placement anything to be in that transparent rectangle, right now i can place object in anywhere in the canvas.

HTML

I need to perform client side cropping.

To do that i'm using jcrop.

Now, since my cropping surface needs to fit in a modal i did the following: (read below or the code directly)

When there is a change in the input, i destroy any jcrop element and remove all css tags from my image except max-"width:100%" so that the image does not overflow.

Then the file from the input gets assigned in a image tag. After that the modal is shown so that i can get the width and height of the properly sized image element.

I then assign these dimensions to the boxWidth and boxHeight parameters of jcrop and attach it to the image so that the jcrop element does not overflow either. I had to place the code around it inside the fileReader.onload function so that it would take dimensions only after the source for the image was changed.