HTML5 Canvas drawImage ratio bug iOS

Question

Voglio ridimensionare l'immagine scattata dalla fotocamera iOS sul lato client con HTML5 Canvas ma continuo a correre in questo strano bug in cui l'immagine ha un rapporto errato se maggiore di ~ 1.5mb

Funziona sul desktop ma non nell'ultima versione di iOS con l'API di caricamento multimediale.

È possibile vedere un esempio qui: http://jsbin.com/ekuros/1

Qualsiasi idea di come risolvere questo problema per favore? È un problema di memoria?

$('#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

C'è una biblioteca di tela di ridimensionamento JavaScript che lavora attorno alle tematiche sottocampionamento e squash verticale incontrate in sede di elaborazione di immagini scalate su tela su dispositivi iOS: http://github.com/stomita/ios-imagefile-megapixel

Ci sono questioni collaterali durante il ridimensionamento immagini con canale alfa (come utilizza il canale alfa per il rilevamento dei problemi) e quando si tenta di ridimensionare gli elementi canvas esistenti, tuttavia è la prima soluzione che ho trovato che funziona effettivamente con il problema in questione.

stomita è anche un utente StackOverflow e ha postato la sua soluzione qui: https://stackoverflow.com/a/12615436/644048

Answer 2

Ho riscontrato lo stesso problema. Sembra che questa è una limitazione iOS, jpg su 2 megapixel sono sottocampionati.

Vedi Creating Compatible Web Content for Safari on IPhone

Answer 3

Sembra che questo è un bug di iOS 6. Non c'è motivo per l'aspetto di uscire dal tuo codice. Ho lo stesso problema che è stato introdotto solo in iOS 6. Sembra che la loro routine di sottocampionamento dia l'altezza sbagliata. Ho inviato un bug report ad Apple, e tu dovresti fare lo stesso. Più segnalazioni di bug ottengono per questo, meglio è.

Answer 4

Se hai ancora bisogno di utilizzare la versione lunga della funzione drawImage è possibile modificare questa:

context.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); 

a questo:

drawImageIOSFix(context, img, sx, sy, sw, sh, dx, dy, dw, dh); 

Hai solo bisogno di includere queste due funzioni da qualche parte:

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

Questo funzionerà bene se è eseguito su iOS o altre piattaforme.

Questo è basato sull'ottimo lavoro di stomita e dovresti riconoscerlo nel tuo lavoro.

Answer 5

Una versione modificata del codice precedente.

Edit: ha visto il codice di L0LN1NJ4 a http://jsfiddle.net/gWY2a/24/ .. immagino che uno è un po 'meglio ...

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