Cropping one image with two crop boxes - javascript

the problem is that, i get one crop box to crop my image, but i want two boxes to cut my (same) image from different 2 areas of same image
i want to crop an image but using two crop boxes to cut, i have used react-advance-cropper and cropper-js-v2 already and not found solution
This is what I want:
what i want is
one image for cropping
i want to crop this image
crop the area of image with two crop boxes
two cut pieces of the image from different selections of the crop image

Related

How do you make it when the slider image is full? ReactJs

I'm asking for help, I have a problem if the slider in the hover image is small in size not full or not covered, but if the large size image is completely covered, how to be the same, my tools use the react-slick plugin for the slider and for the zoom hover react-image-magnify
to see full and run the code in the link below
https://codesandbox.io/embed/m4z84581p8
below this is a wrong picture, it should be when the image hover meets the border box
after zoom
before hover or zoom
but if the image is large when hovered or zoomed then the image is full box
before
what I want is if the image is different either on hover or on zoom the image meets the border box box, like the example of the following link or picture no. 2
https://www.tokopedia.com/laris88/640-adjustable-shoes-organizer-tempat-sepatu?trkid=f=Ca0000L000P0W0S0Sh,Co0Po0Fr0Cb0_src=search_page=1_ob=23_q=sepatu_po=29_catid=1372&lt=/searchproduct%20-%20p6%20-%20product

Resize image based on class

I am using isotope.js in a wordpress theme. I want the user to upload a single image, and then select its shape.
The shape choices are square, long rectangle, and tall rectangle. I'd rather not have the user upload an additional image if they don't have to - and I'd rather use either CSS or Javascript/jQuery to handle the shaping process.
Is this even possible?
::edit:: this is in a responsive layout, so I can't use hard pixel sizes for heights or widths.

Scale image to fit on canvas, while maintaining aspect ratio.

I'm trying to figure out how to render an image on a canvas, changing the canvas zoom to best fit the image (to a mimum size of 50% zoom), and allowing the user to pan around the canvas to see the remainder of the image, if it didn't all fit on the screen.
I've been writing an Image cropper and I've noticed that the two problems I'm running into are that
When the Image is too big it's cut off of the canvas.
When the Image is too big it takes up the entire screen.
By limiting the size of the canvas and changing the zoom of the image, I should be able reduce these issues. In the event an image is still too large, you can pan around the screen. Here is an image example of what I'm looking for
Where the RED is the Canvas element, and the PINK is the Image. (Being displayed on the Canvas, and sticking out on both sides). So the user should be able to pan left, or pan right and see the parts of the image that don't fit on the screen.

Rotate image changing properties phonegap

I need to rotate a image that I capture from the camera or gallery. The steps are:
You capture the image from the camera or gallery You have the
possibility to rotate the image for after crop the image.
I try to rotate the image with CSS properties, the image is rotated well, but the original properties from the image don't change so the problem is that when I call to crop, the crop option choose from the original image, not from the rotate image.
Thanks
use "correctOrientation" property and set the height and width of the image . This will help you

PNG images with hot spots?

I have a few full screen png's where I want to create regions on the images such that when a user clicks on one of the regions, a specific png dissolves in to replace the current image. I'm creating sort of a slide show but I might have 3 or 4 active regions that cause different images to appear.
Techniques for doing this have not changed much: use an imagemap or place transparent elements over the image and give them a click event.

Categories

Resources