Mobile Safari representa <img src="data:image/jpeg;base64..."> escalado en lienzo?

Question

Intento renderizar una imagen local cargada con un objeto FileReader en un lienzo en Safari Mobile en iOS6. Pero cada imagen con datos-URL se renderiza verticalmente a escala. ¿Es esto un error? En Chrome, se procesa correctamente.

• Demo Script

ScreenShot from iOS6 (por encima de: lienzo, a continuación: imagen original)

¿Hay alguna manera de trabajar a evitar este error? ¿Es esto un error?

Si cambio el tamaño de la imagen en el dispositivo primero con la aplicación "PhotoWizard" (reduzca a un ancho de 720px), el Lienzo lo renderiza correctamente. Parece ser un problema con el tamaño de la imagen o las imágenes tomadas con la cámara Aplicación:

• Working Demo Script

sugerencias lo intentó desde Jake Archibald, se ve un poco mejor, pero todavía queda verticalmente escala:

• Modified Demo Script
• ScreenShot from iOS6

Lo probé hoy en un Galaxy Nexus con Android 4.1.1 instalado. Funciona como se esperaba, por lo que esto se ve como un problema de Safari móvil:

• ScreenShot from Android 4.1.1

Answer 1

Esto podría estar relacionado con la restricción que reside en la limitación de recursos iOS Safari. Según el siguiente enlace, se realizarán submuestreos de archivos JPEG de más de 2 millones de píxeles.

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

estoy dudando de que la lona en Safari no puede tratar correctamente con este submuestreo.

He creado algunas soluciones para detectar si la imagen está submuestreada o no y estirándola al tamaño original.

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 (imagen, 0, 0, image.width, image.height, 0, 0, image.width, image.height); Esta función solucionará el problema de compresión en iPod más de 3Mb. Primero, si su imagen es más de 3Mb, calcule el ancho y el alto de la imagen y ajuste ese ancho y alto al lienzo. Luego llama a la función drawImage. Se dará a la imagen final lo que esperaba ...