diff --git a/src/shapes/Image.js b/src/shapes/Image.js index 1da6755b..2344602f 100644 --- a/src/shapes/Image.js +++ b/src/shapes/Image.js @@ -39,17 +39,59 @@ // call super constructor Kinetic.Shape.call(this, config); this.className = IMAGE; + + // Get vertical squash ratio + var image = this.getImage(), + verticalSquashRatio; + // 1) If this the browser is WebKit && + // 2) This isn't an SVG image (https://code.google.com/p/chromium/issues/detail?id=68568) && + // 3) This isn't cross origin image + if (image && + Kinetic.UA.browser == 'webkit' && + image.src.indexOf(".svg") == -1 && + (image.src.indexOf("http") == -1 || image.src.indexOf(location.hostname) !== -1)) { + verticalSquashRatio = this.detectVerticalSquash(image); + if (verticalSquashRatio !== 1) this.setHeight(this.getHeight() / verticalSquashRatio); + } }, _useBufferCanvas: function() { return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke(); }, + /** + * Function used to fix a bug where large images get squashed in iOS 6 & 7 + * Credit: https://github.com/stomita/ios-imagefile-megapixel + */ + detectVerticalSquash: function(img) { + var iw = img.naturalWidth, ih = img.naturalHeight; + var canvas = document.createElement('canvas'); + canvas.width = 1; + canvas.height = ih; + var ctx = canvas.getContext('2d'); + ctx.drawImage(img, 0, 0); + var data = ctx.getImageData(0, 0, 1, ih).data; + var sy = 0; + var ey = ih; + var py = ih; + while (py > sy) { + var alpha = data[(py - 1) * 4 + 3]; + if (alpha === 0) { + ey = py; + } else { + sy = py; + } + py = (ey + sy) >> 1; + } + var ratio = (py / ih); + return (ratio===0)?1:ratio; + }, drawFunc: function(context) { var width = this.getWidth(), height = this.getHeight(), that = this, crop, params, - image; + image, + verticalSquashRatio; //TODO: this logic needs to hook int othe new caching system @@ -69,6 +111,7 @@ image = this.getImage(); if (image) { + crop = this.getCrop(); if (crop) { crop.x = crop.x || 0; diff --git a/test/assets/diana.jpg b/test/assets/diana.jpg new file mode 100644 index 00000000..e4b74ddf Binary files /dev/null and b/test/assets/diana.jpg differ diff --git a/test/unit/shapes/Image-test.js b/test/unit/shapes/Image-test.js index 10616740..94eba862 100644 --- a/test/unit/shapes/Image-test.js +++ b/test/unit/shapes/Image-test.js @@ -379,4 +379,43 @@ suite('Image', function(){ }; imageObj.src = 'assets/darth-vader.jpg'; }); + + // ====================================================== + test('load large image in iOS 6 or iOS 7 (NOTE: Run tests in iOS 6 or 7 to check)', function(done) { + + var container = document.createElement('div'); + + var stage = new Kinetic.Stage({ + container: container, + width: 3264/3, + height: 2448/3, + scale: 1/3 + }); + + kineticContainer.appendChild(container); + + var layer = new Kinetic.Layer(); + + var imageObj = new Image(); + + imageObj.onload = function() { + var diana = new Kinetic.Image({ + x: 0, + y: 0, + image: imageObj, + width: 3264, + height: 2448 + }); + layer.add(diana); + stage.add(layer); + var ctx = diana.getContext(); + var data = ctx.getImageData(0, 2447/3, 1, 1).data; + assert.notEqual(data[3], 0); + done(); + }; + + imageObj.src = 'assets/diana.jpg'; + + }); + }); \ No newline at end of file