Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Fixed #17 the iOS 'image squash' bug.
#changelog
  • Loading branch information
enyo committed Dec 14, 2013
1 parent 99e2e64 commit d7c1640
Showing 1 changed file with 53 additions and 1 deletion.
54 changes: 53 additions & 1 deletion src/dropzone.coffee
Expand Up @@ -825,7 +825,10 @@ class Dropzone extends Em
ctx = canvas.getContext "2d"
canvas.width = resizeInfo.trgWidth
canvas.height = resizeInfo.trgHeight
ctx.drawImage img, resizeInfo.srcX ? 0, resizeInfo.srcY ? 0, resizeInfo.srcWidth, resizeInfo.srcHeight, resizeInfo.trgX ? 0, resizeInfo.trgY ? 0, resizeInfo.trgWidth, resizeInfo.trgHeight

# This is a bugfix for iOS' scaling bug.
drawImageIOSFix ctx, img, resizeInfo.srcX ? 0, resizeInfo.srcY ? 0, resizeInfo.srcWidth, resizeInfo.srcHeight, resizeInfo.trgX ? 0, resizeInfo.trgY ? 0, resizeInfo.trgWidth, resizeInfo.trgHeight

thumbnail = canvas.toDataURL "image/png"

@emit "thumbnail", file, thumbnail
Expand Down Expand Up @@ -1257,6 +1260,55 @@ Dropzone.SUCCESS = "success"



###
Bugfix for iOS 6 and 7
Source: http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
based on the work of https://github.com/stomita/ios-imagefile-megapixel
###

# Detecting vertical squash in loaded image.
# Fixes a bug which squash image vertically while drawing into canvas for some images.
# This is a bug in iOS6 devices. This function from https://github.com/stomita/ios-imagefile-megapixel
detectVerticalSquash = (img) ->
iw = img.naturalWidth
ih = img.naturalHeight
canvas = document.createElement("canvas")
canvas.width = 1
canvas.height = ih
ctx = canvas.getContext("2d")
ctx.drawImage img, 0, 0
data = ctx.getImageData(0, 0, 1, ih).data


# search image edge pixel position in case it is squashed vertically.
sy = 0
ey = ih
py = ih
while py > sy
alpha = data[(py - 1) * 4 + 3]

if alpha is 0 then ey = py else sy = py

py = (ey + sy) >> 1
ratio = (py / ih)

if (ratio is 0) then 1 else ratio

# A replacement for context.drawImage
# (args are for source and destination).
drawImageIOSFix = (ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) ->
vertSquashRatio = detectVerticalSquash img
ctx.drawImage img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio








###
# contentloaded.js
#
Expand Down

0 comments on commit d7c1640

Please sign in to comment.