Wrong default Calculation of Thumbnail Boundaries #1748

Closed
saltwalwei opened this Issue Oct 17, 2016 · 3 comments

Projects

None yet

2 participants

@saltwalwei

From the example:

<div|span|...
*ngf-thumbnail="file" //Generates a thumbnail version of the image file
ngf-size="{width: 20, height: 20, quality: 0.9}" the image will be resized to this size
// if not specified will be resized to this element`s client width and height.
ngf-as-background="boolean" //if true it will set the background image style instead of src attribute.

If the ngf-size attribute is not set, the height and width for the thumbnail will be calculated. Problems occur if the computed css value, which the calculation defaults to, is a percentage value. Then the last two characters get spliced and i.e. height/width: 100% gives an element height/width of 10 resulting in a drastically downscaled thumbnail.

@danialfarid
Owner

It is probably related to this bug: #1737
It does not splice or anything like that it just calculates the width and height by the code specified here: https://github.com/danialfarid/ng-file-upload/blob/master/src/data-url.js#L140 so whatever the computed style is for that element it would use that width and height. Maybe you already have a default image in there with that size or your calculated style would be of 10 size.

@saltwalwei

The problem is in this line https://github.com/danialfarid/ng-file-upload/blob/master/src/data-url.js#L145 and the following setting of the width/height attributes of the size object.
If the computed style has 100% as height and/or weight, splice will cut off 10(0%) because it anticipates a pixel value like 100(px) which will correctly result in 100. These values cause issues here https://github.com/danialfarid/ng-file-upload/blob/master/src/resize.js#L15 because the original image will get resized to a 10px thumbnail, while the actual thumbnail spans 100% of it's container.

@danialfarid danialfarid added the bug label Oct 18, 2016
@danialfarid
Owner

Fixed at 12.2.13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment