Created
April 9, 2015 04:16
-
-
Save goldcoast/e320939d662d19e701f1 to your computer and use it in GitHub Desktop.
ios safari 上传图片变形bug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// answer get from: http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios | |
// usage example: drawImageIOSFix(context, img, 0, 0, file.width, file.height, 0,0, width, height); | |
/** | |
* 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 | |
* | |
*/ | |
function detectVerticalSquash(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; | |
// search image edge pixel position in case it is squashed vertically. | |
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; | |
} | |
/** | |
* A replacement for context.drawImage | |
* (args are for source and destination). | |
*/ | |
function drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) { | |
var vertSquashRatio = detectVerticalSquash(img); | |
// Works only if whole image is displayed: | |
// ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio); | |
// The following works correct also when only a part of the image is displayed: | |
ctx.drawImage(img, sx * vertSquashRatio, sy * vertSquashRatio, | |
sw * vertSquashRatio, sh * vertSquashRatio, | |
dx, dy, dw, dh ); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment