From 545952ddba7c526142e754a814baa6f15e083936 Mon Sep 17 00:00:00 2001 From: Luc Hendriks Date: Thu, 4 Apr 2019 11:27:58 +0200 Subject: [PATCH 1/4] Update load-image.js --- js/load-image.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/load-image.js b/js/load-image.js index 2283b17..00fb458 100644 --- a/js/load-image.js +++ b/js/load-image.js @@ -105,6 +105,8 @@ loadImage.onload = function (img, event, file, callback, options) { revokeHelper(img, options) if (callback) { + file.width = img.naturalWidth; + file.height = img.naturalHeight; loadImage.transform(img, options, callback, file, {}) } } From e3b75e0fb1073b28e33507353ed20891d4df1071 Mon Sep 17 00:00:00 2001 From: Luc Hendriks Date: Fri, 5 Apr 2019 13:23:23 +0200 Subject: [PATCH 2/4] Create load-image-ios.js --- js/load-image-ios.js | 183 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 js/load-image-ios.js diff --git a/js/load-image-ios.js b/js/load-image-ios.js new file mode 100644 index 0000000..fba8f40 --- /dev/null +++ b/js/load-image-ios.js @@ -0,0 +1,183 @@ +/* + * JavaScript Load Image iOS scaling fixes 1.0.3 + * https://github.com/blueimp/JavaScript-Load-Image + * + * Copyright 2013, Sebastian Tschan + * https://blueimp.net + * + * iOS image scaling fixes based on + * https://github.com/stomita/ios-imagefile-megapixel + * + * Licensed under the MIT license: + * http://www.opensource.org/licenses/MIT + */ + +/*jslint nomen: true, bitwise: true */ +/*global define, window, document */ + +(function (factory) { + 'use strict'; + if (typeof define === 'function' && define.amd) { + // Register as an anonymous AMD module: + define(['load-image'], factory); + } else if (typeof module !== 'undefined' && module.exports) { + factory(require('./load-image')); + } else { + // Browser globals: + factory(window.loadImage); + } +}(function (loadImage) { + 'use strict'; + + // Only apply fixes on the iOS platform: + if (!window.navigator || !window.navigator.platform || + !(/iP(hone|od|ad)/).test(window.navigator.platform)) { + return; + } + + var originalRenderMethod = loadImage.renderImageToCanvas; + + // Detects subsampling in JPEG images: + loadImage.detectSubsampling = function (img) { + var canvas, + context; + if (img.width * img.height > 1024 * 1024) { // only consider mexapixel images + canvas = document.createElement('canvas'); + canvas.width = canvas.height = 1; + context = canvas.getContext('2d'); + context.drawImage(img, -img.width + 1, 0); + // subsampled image becomes half smaller in rendering size. + // check alpha channel value to confirm image is covering edge pixel or not. + // if alpha value is 0 image is not covering, hence subsampled. + return context.getImageData(0, 0, 1, 1).data[3] === 0; + } + return false; + }; + + // Detects vertical squash in JPEG images: + loadImage.detectVerticalSquash = function (img, subsampled) { + var naturalHeight = img.naturalHeight || img.height, + canvas = document.createElement('canvas'), + context = canvas.getContext('2d'), + data, + sy, + ey, + py, + alpha; + if (subsampled) { + naturalHeight /= 2; + } + canvas.width = 1; + canvas.height = naturalHeight; + context.drawImage(img, 0, 0); + data = context.getImageData(0, 0, 1, naturalHeight).data; + // search image edge pixel position in case it is squashed vertically: + sy = 0; + ey = naturalHeight; + py = naturalHeight; + while (py > sy) { + alpha = data[(py - 1) * 4 + 3]; + if (alpha === 0) { + ey = py; + } else { + sy = py; + } + py = (ey + sy) >> 1; + } + return (py / naturalHeight) || 1; + }; + + // Renders image to canvas while working around iOS image scaling bugs: + // https://github.com/blueimp/JavaScript-Load-Image/issues/13 + loadImage.renderImageToCanvas = function ( + canvas, + img, + sourceX, + sourceY, + sourceWidth, + sourceHeight, + destX, + destY, + destWidth, + destHeight + ) { + if (img._type === 'image/jpeg') { + var context = canvas.getContext('2d'), + tmpCanvas = document.createElement('canvas'), + tileSize = 1024, + tmpContext = tmpCanvas.getContext('2d'), + subsampled, + vertSquashRatio, + tileX, + tileY; + tmpCanvas.width = tileSize; + tmpCanvas.height = tileSize; + context.save(); + subsampled = loadImage.detectSubsampling(img); + if (subsampled) { + sourceX /= 2; + sourceY /= 2; + sourceWidth /= 2; + sourceHeight /= 2; + } + vertSquashRatio = loadImage.detectVerticalSquash(img, subsampled); + if (subsampled || vertSquashRatio !== 1) { + sourceY *= vertSquashRatio; + destWidth = Math.ceil(tileSize * destWidth / sourceWidth); + destHeight = Math.ceil( + tileSize * destHeight / sourceHeight / vertSquashRatio + ); + destY = 0; + tileY = 0; + while (tileY < sourceHeight) { + destX = 0; + tileX = 0; + while (tileX < sourceWidth) { + tmpContext.clearRect(0, 0, tileSize, tileSize); + tmpContext.drawImage( + img, + sourceX, + sourceY, + sourceWidth, + sourceHeight, + -tileX, + -tileY, + sourceWidth, + sourceHeight + ); + context.drawImage( + tmpCanvas, + 0, + 0, + tileSize, + tileSize, + destX, + destY, + destWidth, + destHeight + ); + tileX += tileSize; + destX += destWidth; + } + tileY += tileSize; + destY += destHeight; + } + context.restore(); + return canvas; + } + } + return originalRenderMethod( + canvas, + img, + sourceX, + sourceY, + sourceWidth, + sourceHeight, + destX, + destY, + destWidth, + destHeight + ); + }; + +})); From 681d83752c6de941fbd78d08bdfc5f47cf3008ee Mon Sep 17 00:00:00 2001 From: Luc Hendriks Date: Fri, 5 Apr 2019 13:23:51 +0200 Subject: [PATCH 3/4] Update index.js --- js/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/index.js b/js/index.js index 776053d..3c4dea7 100644 --- a/js/index.js +++ b/js/index.js @@ -1,5 +1,6 @@ module.exports = require('./load-image') +require('./load-image-ios') require('./load-image-scale') require('./load-image-meta') require('./load-image-fetch') From 5c66383df2256ece38bdffd930f30c0530c99dd7 Mon Sep 17 00:00:00 2001 From: Luc Hendriks Date: Fri, 5 Apr 2019 13:27:56 +0200 Subject: [PATCH 4/4] Update load-image-ios.js --- js/load-image-ios.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/load-image-ios.js b/js/load-image-ios.js index fba8f40..16cb78c 100644 --- a/js/load-image-ios.js +++ b/js/load-image-ios.js @@ -15,11 +15,11 @@ /*jslint nomen: true, bitwise: true */ /*global define, window, document */ -(function (factory) { +;(function (factory) { 'use strict'; if (typeof define === 'function' && define.amd) { // Register as an anonymous AMD module: - define(['load-image'], factory); + define(['./load-image'], factory); } else if (typeof module !== 'undefined' && module.exports) { factory(require('./load-image')); } else {