2014-05-13 2 views
5

Ich erstelle eine mobile App., Wo der Benutzer ein Bild von Handy wählen kann, dann verwische ich es .... Das Problem ist, dass wenn der Benutzer ein großes Bild wählen (Mehr als 2 MB), die App. Absturz.Canvas drawImage Absturz auf große Bilder

JS-Code:

convert_local_image_base64: function(url, callback) { 
    var canvas = document.createElement('CANVAS'), 
      ctx = canvas.getContext('2d'), 
      img = new Image; 
    img.crossOrigin = 'anonymous'; 
    img.onload = function() { 
     canvas.height = img.height; 
     canvas.width = img.width; 
     ctx.drawImage(img, 0, 0); 
     var dataURL = canvas.toDataURL('image/png'); 
     callback.call(this, dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
}, 

So hat es eine andere Art und Weise ähnliche Operation zu erreichen?!.

Antwort

3

AUF PC: -
ich mehrere großformatigen Bilder (mehr als 2 MB) versucht, auf eine Leinwand zu zeichnen. Ich habe auch versucht, seine dataURL zu bekommen und sie auf einer anderen Leinwand neu zu zeichnen. Alles hat gut für mich funktioniert. (Versucht auf IE11, Chrome und Firefox.)

Bitte stellen Sie sicher, dass Sie nicht mit Cross-Origin-Ressource teilen (CORS).

Auch ich habe einige Beiträge hier auf Stackoverflow im Zusammenhang mit Auflösungen auf Leinwand gefunden.

Maximum size of a <canvas> element

Is there a max size for images being loaded onto canvas on iPhone?

EDITED: auf mobilen Geräte-
ist hier die Einschränkungen für die Leinwand für mobile Geräte: -

Die maximale Größe für ein Canvas-Element ist 3 Megapixel für Geräte mit weniger als 256 MB RAM und 5 Megapixel für Geräte mit größer oder gleich 256 MB RAM.

So zum Beispiel - wenn Sie die ältere Hardware von Apple unterstützen möchten, kann die Größe der Leinwand 2048 × 1464 nicht überschreiten.

Hoffe, diese Ressourcen werden Ihnen helfen, Sie herauszuziehen.

+0

Ich verwende den Code auf einem mobilen Gerät, nicht auf einem Computer. – Moussawi7

+0

@ Moussawi7 Bitte überprüfen Sie meine bearbeitete Antwort. –

1

Es scheint eine Größenbeschränkung mit der Canvas-Funktion drawImage auf Android-Geräten zu geben. Es gibt eine Grenze von 3 Megapixeln, aber die Grenze ist für die Größe des Bildes, das in der Funktion drawImage verwendet wird, und nicht eine Grenze für die Leinwandgröße, d. H. Das Beschneiden/Schrumpfen der Größe des gezeichneten Bildes hat keine Auswirkungen.

ctx.drawImage (Bild größer als3mp, 100, 100, 63, 63, 50, 50, 50, 50); // immer noch Aw Snap! stürzt auf Android ab!