Created
September 25, 2013 10:54
-
-
Save ms2sato/6698027 to your computer and use it in GitHub Desktop.
Canvasで画像を縮小したいのだけど、MobileSafariでは大きな画像に関して取得される高さが妙になっているらしい時 ref: http://qiita.com/ms2sato/items/c3cb0075138ade865bc2
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
/** | |
* 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); | |
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio); | |
} |
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
//context.drawImage(img, 0, 0, canvaswidth, canvasheight); //これはダメだった | |
drawImageIOSFix(context, img, 0, 0, width, height, 0, 0, canvaswidth, canvasheight); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment