2

I have a fabric js canvas that I allow users to add external images to. Often times the user adds images that are too large to fit the canvas and it's a little difficult for them to re-size them correctly.

I'd like to automatically scale the larger images down so that the image maintains it's aspect ratio but fits on the canvas.

Is there something in the fabric.js api that does this or do I need to calculate a ratio and set the scale x\y?

I've tried this but it distorts the image.

 oImg.set({
                    left: _fabicCanvas.width / 2,
                    top: _fabicCanvas.height / 2,
                    scaleY: _fabicCanvas.height / oImg.height,
                    scaleX: _fabicCanvas.width / oImg.width
                });
NullReference
  • 4,404
  • 12
  • 53
  • 90
  • 1
    @markE Haha, can't believe I missed that. – NullReference Jun 16 '15 at 18:24
  • If the original image is multiple sizes larger than the desired destination size, then you will have to reduce the size of the original image in multiple steps to avoid distortion caused by the scaling process itself. Eg. If the original is 2000x2000 and you want 500x500 you would first reduce to 1000x1000 and then to 500x500. See K3N's nice post here: http://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing/17862644#17862644 – markE Jun 16 '15 at 21:56

1 Answers1

2

1) Determine which dimension is the one which exceeds the size of the window you want to put the image in. If both exceed the size calculate both factors and use the largest:

width_factor = imagewidth / allowable_width
height_factor = imageheight / allowable_height

2) Scale both the height and the width by the same factor. Eg. if the width is exceeded:

factor = imagewidth / allowable_width
jcoppens
  • 5,306
  • 6
  • 27
  • 47
  • @markE That depends on the algorithm used to scale, and is not the question here (it can influence the quality, not distorsion). The OP's program scales height and width by different factors, which is why his image distorts. – jcoppens Jun 16 '15 at 17:59
  • We shouldn't take into account browser problems. If we do that, we will be eternally bound to such aberrations as the 216-color palette. And we'll end up adding to the mess of detecting browser makes and versions as we already have. Moreover, imagine an image of 2002 pixels... we'd have to downsize the image to 501 pixels to make it fit in a 1000x1000 pixel window? Or else crop the submitted image (and maybe lose important information)? Anyways, this discussion is not really relevant here... ;-) – jcoppens Jun 16 '15 at 21:45
  • 1
    No... Not at all! My apologies if I sounded offensive! I tend to sound a little,... ah... 'shortish' ;-) Maybe that is due to the fact English isn't my first language, or that I want to cram much into the limited comment box, and maybe it's because I've never been known to be very diplomatic... Your (and the link's) comments are interesting, useful and valid, but I just suggest we are repairing things at the wrong side. – jcoppens Jun 17 '15 at 14:50