HTML5 Canvas drawImage ratio bug iOS

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); 
}); 

Answer 1

有一个JavaScript画布大小调整库，它围绕遇到iOS装置绘制画布缩放的图像时，子采样和垂直壁球问题的工作原理： http://github.com/stomita/ios-imagefile-megapixel

有调节具有alpha通道图像时侧的问题（因为它使用Alpha通道进行问题检测），并尝试调整现有画布元素的大小时，但是这是我发现的第一个解决方案，实际上可以解决问题。

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

Answer 2

我遇到过同样的问题。看起来这是一个iOS限制，超过200万像素的jpg被二次采样。

见Creating Compatible Web Content for Safari on IPhone

Answer 3

看起来这是一个iOS 6的错误。没有理由让你的代码失控。我有同样的问题，这只是在iOS 6中引入的。似乎他们的二次采样例程给出了错误的高度。我向苹果提交了一个错误报告，你也应该这样做。他们得到的错误报告越多越好。

Answer 4

如果您仍然需要使用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 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 
} 
}