CODEWITHSUNDEEP
fabricjsfabricjs2
user2455079
user2455079

Reputation: 418

FabricJS. Image cropping within original container

I need cropping functionality, image blocks must be unchangable, the best one i saw on canva.com enter image description here If original block w/h!= image w/h (different shape dimensions) user must have ability move and resize image within current active image object WITHOUT changing original object dimension. Currently i can make cropping using clipTo and moving it with actions, but it's not convenient. Also i can bound image to rectagle, but i will cropped parts of image will be hidden...

Needed working demo here: Demo here: https://www.canva.com/design/DACkUOnIfcs/dx5k5cs4uJbyscmmpzp1Pg/edit

Can i achieve something like that with current fabricjs?

Upvotes: 0

Views: 2277

Answers (1)

Fred Guth
Fred Guth

Reputation: 1667

Yes, you can.

  1. Add the original image to canvas and set "selectable" to false
  2. create a croppingArea rectangle and add it in the center of canvas
  3. use the respective left, top, width, height, scaleX, scaleY of croppingArea and the originalImage to calculate the the bounding coords of the cropped area in originalImage coordinates
  4. create a cropedImage from originalImage where cropX, cropY, width and height are set by step 3

Upvotes: 3

Related Questions