Mobile Safari esegue il rendering di <img src="data:image/jpeg;base64..."> ridimensionato su tela?

Question

Provo a eseguire il rendering di un'immagine locale caricata con un oggetto FileReader su una tela su Safari Mobile su iOS6. Ma ogni immagine con URL dati viene visualizzata in scala verticale. è un insetto? Su Chrome è reso correttamente.

• Demo Script

ScreenShot from iOS6 (sopra: Tela, qui di seguito: Immagine originale)

Esiste un modo di lavorare, a questo problema? è un insetto?

Se ridimensiono l'immagine sul dispositivo per prima cosa con l'app "PhotoWizard" (ridimensiona a 720px larghezza), il Canvas lo rende correttamente. Sembra essere un problema con il formato immagine o le immagini scattate con la fotocamera App:

• Working Demo Script

suggerimenti sperimentate Jake Archibald, sembra un po 'meglio, ma viene comunque verticalmente ridimensionato:

• Modified Demo Script
• ScreenShot from iOS6

L'ho provato oggi su un Galaxy Nexus con Android 4.1.1 installato. Funziona come previsto, quindi questo sembra davvero come un problema di Safari per cellulare:

• ScreenShot from Android 4.1.1

Answer 1

Questo potrebbe essere correlato alla restrizione che risiede nella limitazione delle risorse iOS Safari. Secondo il seguente link, i file JPEG superiori a 2 milioni di pixel saranno sottocampionati.

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

che sto dubitando quella tela in Safari non può trattare correttamente con questo subsampling.

Ho creato qualche soluzione per rilevare se l'immagine è sottocampionata o meno e allungarla alla dimensione originale.

https://github.com/stomita/ios-imagefile-megapixel

Answer 2

var cnv = document.createElement("canvas"); 
     ctx = cnv.getContext("2d"); 

     image = new Image(); 

     image.src = src; 

     image.onload = function() { 

      var size = scaleSizeRatio(image.width,image.height); 
      cnv.width = size[0]; 
      cnv.height = size[1]; 
      ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width , image.height); 

      var div = container; 
      div.appendChild(cnv);  

     } 

ctx.drawImage (immagine, 0, 0, image.width, image.height, 0, 0, image.width, image.height); Questa funzione risolverà il problema di spremitura in iPod più di 3 Mb. Innanzitutto, se l'immagine è superiore a 3 Mb, calcola la larghezza e l'altezza ridimensionate per l'immagine e imposta la larghezza e l'altezza sull'area di disegno. Quindi chiama la funzione drawImage. Dare all'immagine finale quello che ti aspettavi ...