我想调整从iOS相机上使用HTML5画布客户端拍摄的图像，但我一直在这个奇怪的错误，这错误的图像有一个错误的比率，如果运行超过〜1.5MB大

它的工作原理在桌面上，但不是在最新的iOS版本，媒体上传API。

：你可以在这里看到一个例子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 = $('');

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 = $('');

thumb.attr('src', data);

$('body').append(thumb);

});

image.attr('src', e.target.result);

};

reader.readAsDataURL(file);

});

Answer 1:

这里是一个JavaScript的画布大小调整库，围绕在iOS设备上绘制在画布上缩放图像时所遇到的欠采样和垂直壁球问题的工作： http://github.com/stomita/ios-imagefile-megapixel

有枝节问题缩放时的alpha通道图像(因为它使用alpha通道的问题检测)，并试图调整现有画布元素时，但它是第一个解决方案，我发现，其实手头的工作问题。

stomita也是StackOverflow的用户，并张贴在这里他的解决方案： https://stackoverflow.com/a/12615436/644048

Answer 2:

如果您仍然需要使用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 ，你应该归功于他的工作。

Answer 3:

看起来这是一个iOS 6的错误。 没有理由方面，从你的代码获得走出低谷。 我有只在IOS 6中引入如此看来，他们的子采样程序给出了错误的高度相同的问题。 我提交了一个bug报告给苹果，而你也应该这样做。 更bug报告，他们得到这个好。

Answer 4:

我已经经历了同样的问题。 看来，这是一个iOS的限制，JPG超过200万像素的子采样。

请参阅创建于IPhone兼容的Web内容的Safari

Answer 5:

修改后的版本上面的代码。

编辑：看到L0LN1NJ4的在码http://jsfiddle.net/gWY2a/24/ ..想，一个人的好一点...

function drawImageIOSFix (ctx, img) {

var vertSquashRatio = detectVerticalSquash (img)

var arg_count = arguments.length

switch (arg_count) {

case 4 : ctx.drawImage (img, arguments[2], arguments[3] / vertSquashRatio); break

case 6 : ctx.drawImage (img, arguments[2], arguments[3], arguments[4], arguments[5] / vertSquashRatio); break

case 8 : ctx.drawImage (img, arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7] / vertSquashRatio); break

case 10 : ctx.drawImage (img, arguments[2], arguments[3], arguments[4], arguments[5], arguments[6], arguments[7], arguments[8], arguments[9] / vertSquashRatio); break

}

// Detects 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 (and IOS7) 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, ey = ih, 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

}

}

文章来源: HTML5 Canvas drawImage ratio bug iOS