6

In my project i'm using HTML5 Canvas and FabricJS. I have scenario to maintain the aspect ratio for the image object that i have placed in canvas. while adjusting corners or scaling the image i have to update width or height to maintain the aspect ratio for the image. problem image

The above image will clearly show my problem. i need an algorithm or formula to maintain the aspectratio of the image.

The image should meet the following,

  1. if i do shrinking by adjusting the width or height of the image from the actual size it will crop and display the picture in the same aspect ratio.
  2. if i do expand by adjusting the width or height of the image from the actual size it will expand the image height or width respectively and cropped for the viewport height and width to maintain the aspect ratio.
  3. the hidden parts are panned and viewed.

please give me some solution, thanks.

Pravinkumar
  • 319
  • 1
  • 4
  • 15
  • Sorry. Misinterpreted your question. Wonder if this will help though. https://stackoverflow.com/questions/7863653/algorithm-to-resize-image-and-maintain-aspect-ratio-to-fit-iphone?rq=1 – Charlie Nov 12 '14 at 12:40

2 Answers2

16

To ensure that resizing is done proportinatly, you can simply add the following properties to your image object:

lockUniScaling: true

I will typically want the image to scale from the center, and thus set this as well:

centeredScaling: true

To "crop" the image however; this takes more effort as this isn't a default functionality offered by Fabric JS. I've done a fair bit of work around this and have yet to come up with a bullet-proof solution that works for text, images, rectangles, polygons, circles, rotation angles, etc.

The basis behind this is to create two elements - one being your image, and the second being your clipping mask (a shape typically, such as a rectangle, polygon, etc.) than then is applied as the clipTo property to your image element. This solution is covered in: Multiple clipping areas on Fabric.js canvas

References - Fabric JS Documentation

Community
  • 1
  • 1
PromInc
  • 1,174
  • 7
  • 12
  • Update 2023, the `lockUniScaling` property is not available on single objects such as an Image or Rect. To implement uniform scaling, the best way currently is to hide some object controls like: https://stackoverflow.com/a/70772891/9982935 Reference: https://github.com/fabricjs/fabric.js/issues/6849 – Adam Beleko Aug 29 '23 at 04:28
-5

As you're using HTML5, you could just apply a CSS3 transformation to the canvas with:

canvas {
    -ff-transform: scale(2); 
    -ms-transform: scale(2); 
    -webkit-transform: scale(2); 
}

Using the CSS3 transform property with the scale method should resize the canvas, and maintaining you're aspect ratio. It's also

You may, however, need to work around separate scaling issues caused by retina/high dpr displays.

More information about the CSS3 transform property can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Charlie
  • 4,197
  • 5
  • 42
  • 59
  • 1
    The OP is talking about canvas objects not canvas itself, so I don't think it applies here. – kangax Nov 12 '14 at 12:32
  • Here canvas is my container and i'm adding new image inside canvas so i need to adjust the particular image width and height not the entire canvas. while adjusting the image width or height i need to adjust the image based on aspect ratio and crop the image as per the canvas image object width and height. – Pravinkumar Nov 12 '14 at 12:33