Mobil Safari <img src="data:image/jpeg;base64..."> Tuval üzerine ölçekli aktif kılar?

Question

Ben iOS6 Safari Mobil'de Tuval üzerine bir FileReader nesnesi ile yüklenen bir yerel görüntü oluşturmaya çalışırlar. Ancak veri-URL’si olan her resim dikey olarak ölçeklenir. Bu bir hata mı? Chrome'da doğru şekilde oluşturuldu.

(yukarıda: Tuval, aşağıda SELÇOKİ)

• Demo Script

ScreenShot from iOS6

çalışmak-around için bu hatayı herhangi bir yolu var mı? Bu bir hata mı? İlk "PhotoWizard" App (aşağı 720px genişliğine büyütülebilir) cihaz üzerinde görüntü boyutlandırma ise

, Kanvas doğru oluşturur. biraz daha iyi görünüyor, Jake Archibald den

• Working Demo Script

çalıştı öneri, ama yine de dikey ölçekli alır: Kamera App ile çekilen görüntü boyutu veya görüntüleri ile ilgili bir sorun gibi görünüyor

• Modified Demo Script
• ScreenShot from iOS6

Ben yüklü Android 4.1.1 ile Galaxy Nexus üzerinde bugün denedim. beklendiği gibi çalışır, bu nedenle bu gerçekten bir cep Safari konuya benziyor:

• ScreenShot from Android 4.1.1

Answer 1

Bu iOS Safari kaynak sınırlaması bulunur kısıtlama ilgili olabilir. Aşağıdaki bağlantıya göre, 2M pikselin üzerindeki JPEG dosyaları alt örneklenecek.

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

bunu doğru alt örnekleme ile başa çıkamaz Safari'de o tuval şüphe ediyorum.

Görüntünün alt örneklenip örneklenmediğini ve orijinal boyuta mı uzatacağını belirleyen bazı geçici çözümler yarattım.

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 (resim, 0, 0, image.width, image.height, 0, 0, image.width, image.height); Bu işlev, iPod'daki sıkma sorununu 3Mb'den fazla çözecektir. İlk resim 3Mb sonra görüntü için ölçekli genişliğini ve yüksekliğini hesaplamak ve tuvaline bu genişlik ve yüksekliğini ayarlamak fazlaysa ne olur. Sonra drawImage işlevini çağırın. Nihai görüntüyü beklediğiniz gibi verecektir ...