diff --git a/js/load-image-scale.js b/js/load-image-scale.js index c5e381e..213e12a 100644 --- a/js/load-image-scale.js +++ b/js/load-image-scale.js @@ -72,8 +72,8 @@ } } newOptions.crop = true - width = img.naturalWidth || img.width - height = img.naturalHeight || img.height + width = options.maxWidth || img.naturalWidth || img.width + height = options.maxHeight || img.naturalHeight || img.height if (width / height > aspectRatio) { newOptions.maxWidth = height * aspectRatio newOptions.maxHeight = height @@ -158,8 +158,15 @@ (minHeight || destHeight) / destHeight ) if (scale > 1) { - destWidth *= scale - destHeight *= scale + /** + * These value are used to create canvas elements. Ensuring that they are integers + * (rather than floats) avoids a potential 1px rounding error in the canvas element + * as canvas elements will always round it down to the nearest integer rather than + * following standard rounding rules. For example, using a value of 199.9999999px + * for a canvas height would result in a height of 199px rather than 200px. + */ + destWidth = Math.round(destWidth * scale) + destHeight = Math.round(destHeight * scale) } } /** @@ -171,8 +178,15 @@ (maxHeight || destHeight) / destHeight ) if (scale < 1) { - destWidth *= scale - destHeight *= scale + /** + * These value are used to create canvas elements. Ensuring that they are integers + * (rather than floats) avoids a potential 1px rounding error in the canvas element + * as canvas elements will always round it down to the nearest integer rather than + * following standard rounding rules. For example, using a value of 199.9999999px + * for a canvas height would result in a height of 199px rather than 200px. + */ + destWidth = Math.round(destWidth * scale) + destHeight = Math.round(destHeight * scale) } } if (useCanvas) {