Image schrumpft beim Konvertieren zu base64 in Cordova ios iphone

Question

Ich arbeite an einem Cross-Plattform-Cordova-Projekt, das Bilder auf einen Server hochlädt und sie auf der Website anzeigt. Der verwendete Code für das skalierte Bild aus dem Telefonspeicher zu erhalten und bekommt die base64-Daten sind wie folgt:

var image = new Image(); 
image.src = URL; 
image.onload = function() { 

var canvas = document.createElement("canvas"); 
var img_width = this.width; 
var img_height = this.height; 
canvas.width =1000; 
canvas.height = 1000; 

var w=(1000/img_width); 
var h=(1000/img_height); 

var ctx = canvas.getContext("2d"); 
ctx.scale(w,h); 
ctx.drawImage(this,0,0);     

var dataURL = canvas.toDataURL("image/png",1); 

Hier ist das Problem, dass die Bildbreite als die Leinwand Breite gesetzt ist, aber die Höhe ist nicht. Auch funktioniert der Code perfekt auf Android-Geräten und iPads, aber das Problem tritt nur auf iPhones.

Getestet auf Iphone 4s und 5c Kann jemand bitte helfen Sie mir !!!!

Das Eingangsbild ist:

Die Bildausgabe auf der Leinwand (als png-Datei) ist:

Answer 1

konnte ich eine Abhilfe für das Problem in meinem Fall schaffen, indem die Antwort in den folgenden Link, um meine Bedürfnisse zur Verfügung gestellt wie folgt zu ändern:

When scaling and drawing an image to canvas in iOS Safari, width is correct but height is squished

ich den Code ein wenig gezwickt, es so sieht nun wie folgt:

var image = new Image(); 
    image.src = URL; 
    image.onload = function() { 
     var canvas = document.createElement("canvas"); 
     var img_width = image.width; 
     var img_height = image.height; 


     canvas.width = 600; 
     canvas.height = 600; 
     var ctx = canvas.getContext("2d"); 


     var imgRatio; 
     if (image.width > image.height) { 
      imgRatio = image.width/image.height; 
     } else { 
      imgRatio = image.height/image.width; 
     } 


     var canRatio = canvas.width/canvas.height; 

     var scaledWidth = image.width * (canvas.height/image.height); 
     var scaledHeight; 
     if (platformVersion.substring(0, 1) < 8) { 
      scaledHeight = (image.height * (canvas.width/image.height)) * 2.1; 
     } else { 
      scaledHeight = (image.height * (canvas.width/image.height)); 
     } 


     if (imgRatio > canRatio) { 
      ctx.drawImage(image, 0, 0, canvas.width, scaledHeight); 
     } else { 
      ctx.drawImage(image, 0, 0, scaledWidth, canvas.height); 
     } 

     var dataURL = canvas.toDataURL("image/png", 1); 
    } 

Hier in Abhängigkeit davon, ob das Betriebssystem des Telefons aus dem cordova Gerät Plugin i Wert auf die skalierten Höhe multiplizieren für den squishing Effekt zu kompensieren.

Answer 2

Es sieht aus wie Sie bekommen eine viel größere Wert für img_height, als Sie erwarten. Sind Sie sicher, dass dieses auf den richtigen Platz zeigt? Ich nehme an, Sie möchten die Breite und Höhe des Bildes, das Sie geladen haben, also warum nicht nur image.width und image.height verwenden?