Mobile Safari renderuje <img src="data:image/jpeg;base64..."> skalowane na płótnie?

Question

Próbuję renderować obraz lokalny załadowany obiektem FileReader na kanwie w Safari Mobile na iOS6. Ale każdy obraz z adresem URL danych jest renderowany pionowo. Czy to błąd? W Chrome jest renderowany poprawnie.

• Demo Script

ScreenShot from iOS6 (powyżej: Płótno, poniżej: Original Image)

Czy istnieje jakiś sposób na obejście tego błędu? Czy to błąd?

Jeśli najpierw zmieniam rozmiar obrazu na urządzeniu przy pomocy aplikacji "PhotoWizard" (przeskaluj go do szerokości 720px), płótno renderuje go poprawnie. Wydaje się, że problem z rozmiaru obrazu lub obrazy wykonane aparatem App:

• Working Demo Script

Wypróbowane sugestie Jake Archibald, wygląda nieco lepiej, ale nadal dostaje pionowo skalowane:

• Modified Demo Script
• ScreenShot from iOS6

Wypróbowałem to już dziś na Galaxy Nexusie z zainstalowanym Androidem 4.1.1. Działa jak się spodziewano, więc to naprawdę wygląda jak mobilnego Safari numerze:

• ScreenShot from Android 4.1.1

Answer 1

Może to być związane z ograniczeniem który rezyduje w ograniczeniu zasobów iOS Safari. Zgodnie z poniższym linkiem, pliki JPEG powyżej 2M pikseli będą podpróbkowane.

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

mam wątpliwości, że płótno w Safari nie może poradzić sobie z tym podpróbek poprawnie.

Utworzono sposób obejścia tego problemu, sprawdzając, czy obraz jest podpróbkowany, czy nie i rozciągając go do oryginalnego rozmiaru.

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 (zdjęcie, 0, 0, image.width, image.height, 0, 0, image.width, image.height); Ta funkcja naprawi problem z wyciśnięciem w iPodzie powyżej 3 MB. Najpierw, jeśli obraz ma więcej niż 3 MB, obliczyć skalowaną szerokość i wysokość obrazu i ustawić szerokość i wysokość na kanwie. Następnie wywołaj funkcję drawImage. Da to ostateczny obraz, którego się spodziewałeś ...