HTML5 Canvas drawImage 비율 버그 iOS [javascript]
Answers
drawImage 함수의 긴 버전을 사용해야하는 경우 다음과 같이 변경할 수 있습니다.
context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
이에:
drawImageIOSFix(context, img, sx, sy, sw, sh, dx, dy, dw, dh);
어딘가에 다음 두 함수를 포함하면됩니다.
/**
* 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 );
}
이것은 iOS 또는 다른 플랫폼에서 실행 되든 상관없이 잘 작동합니다.
이것은 stomita 의 위대한 업적을 기반으로하며 귀하의 업무에 그를 신용시켜야합니다.
Question
HTML5 Canvas를 사용하여 클라이언트 측 iOS 카메라에서 가져온 이미지의 크기를 조정하고 싶지만 ~ 1.5MB보다 크면 이미지의 비율이 잘못된이 이상한 버그로 계속 실행합니다.
데스크톱에서는 작동하지만 미디어 업로드 API가있는 최신 iOS 버전에서는 작동하지 않습니다.
http://jsbin.com/ekuros/1 에서 예제를 볼 수 있습니다.
이 문제를 해결하는 방법을 알려주세요. 이것이 메모리 문제입니까?
$('#file').on('change', function (e) {
var file = e.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var image = $('<img/>');
image.on('load', function () {
var square = 320;
var canvas = document.createElement('canvas');
canvas.width = square;
canvas.height = square;
var context = canvas.getContext('2d');
context.clearRect(0, 0, square, square);
var imageWidth;
var imageHeight;
var offsetX = 0;
var offsetY = 0;
if (this.width > this.height) {
imageWidth = Math.round(square * this.width / this.height);
imageHeight = square;
offsetX = - Math.round((imageWidth - square) / 2);
} else {
imageHeight = Math.round(square * this.height / this.width);
imageWidth = square;
offsetY = - Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
var thumb = $('<img/>');
thumb.attr('src', data);
$('body').append(thumb);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(file);
});
나는 같은 문제를 경험했다. 이것은 iOS 제한 사항 인 것으로 보이며 2 메가 픽셀 이상의 jpg가 서브 샘플링됩니다.
iPhone에서 Safari 호환 웹 컨텐츠 만들기를 참조하십시오.