2012-08-24 13 views
11

Ich habe ein kleines test web app die eine HTML-Leinwand in ein Bild konvertiert (durch Nihilogic des canvas2image JavaScript-Bibliothek verwenden), dann auf die Leinwand mit dem erzeugten Bild ersetzt und zeigt eine Meldung benachrichtigt die Benutzer, um dieses Bild zu berühren (lang), um es auf ihrem Telefon zu speichern.Bild als Datenstrom im Android-Browser Render

Das Problem, auf das ich gestoßen bin, ist, dass der Standard-Webbrowser von Android ("Internet") den base64-kodierten Datenstrom nicht darstellt, der das Bild darstellt, sondern stattdessen ein Fragezeichen anzeigt. Gibt es eine Möglichkeit, dies zu lösen? Wenn ja, wie?

+0

Welche Android-Version laufen Sie auch? Es funktioniert in Jelly Bean (4.1.1). Ich kann das Bild von der Leinwand erzeugen und kann es ohne Probleme speichern. – alex

+0

können Sie versuchen, zu sehen, wenn ein div mit CSS-Stil 'background-image: url (data: image/png; base64datahere ....) erstellen;' funktioniert, anstatt eine img mit src zu erstellen? – Prasanth

Antwort

4

Verwenden Sie einen benutzerdefinierten ContentProvider, und überschreiben Sie openFile(), um den Stream als Temp-Datei zurückzugeben.

Sie können den URI als src im html A-Tag verwenden.

<a src="Example://file"></a> 
public class ExampleProvider extends ContentProvider { 

    @Override 
    public ParcelFileDescriptor openFile(Uri uri, String mode) throws FileNotFoundException {   
     //Get your bitmap 
     Bitmap bmp = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.file_example); 
     File tempFile = null; 
     try { 
      //Create the tempfile form a stream 
      tempFile = File.createTempFile("tempfile", ".thumb", getContext().getCacheDir()); 
      BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(tempFile)); 
      bmp.compress(Bitmap.CompressFormat.JPEG, 100, out); 
      out.close(); 
      if(mode.equals("r")) { 
       return ParcelFileDescriptor.open(tempFile, ParcelFileDescriptor.MODE_READ_ONLY); 
      } 
     } 
     catch(IOException e) { 
      LOGGER.error("Couldn't generate temp file for thumb view, guid:" + guid, e); 
     } 
     finally { 
      if(tempFile != null { 
       //The unix filesystem automatically deletes the file once all handles are gone 
       tempFile.delete(); 
      } 
     } 
    } 
} 
+0

Sehr schöne Lösung. Diese Art von Lösung stellt dem Projektteam immer ein vollständiges Steuerungsentwicklungsmodell zur Verfügung, mit dem Sie die Ausnahme behandeln können, um sie zu beheben und die Standardmethode beizubehalten, wenn die Ausnahme nicht behandelt werden muss. Aber ich denke, das scheint ein guter Ansatz zu sein, wenn und nur wenn Rückwärtskompatibilität auch Ihr Fokus ist. – Miere

+0

@Ty S. Welche Sprache ist das genau? Ich kann es nicht sagen. –

+0

Java auf der Android-Plattform. – tsmith

1

Basierend auf Kommentar von @goldenparrot Bild kann mit

<img src="data:image/png;base64,BASE64_STRING_HERE" /> 

(und auch mit dem vorgeschlagenen CSS background-image), wenn base64 Daten bereits vorhanden ist, wenn Seite geladen zu sehen . Es funktioniert jedoch aus irgendeinem Grund nicht, wenn genau die gleiche Datenkette dynamisch eingegeben wird. Selbst ein statisch geladenes Bild mit base64-Daten hat Probleme: Es reagiert nicht auf einen langen Klick, daher kann es nicht heruntergeladen werden. Ich benutze Android 2.3.6.

Edit: Sie können auch das Hinzufügen versuchen zusätzliche Download-Link

<a href="data:application/octet-stream;base64,BASE64_STRING_HERE">download file</a> 

aber es ist nicht für mich zu arbeiten. Android hat den Inhalt dieser Datei nur als Text angezeigt. Der normale Desktop-Webbrowser hat zwar den Dialog "Datei herunterladen" geöffnet, aber keine Erweiterung für diese Datei vorgeschlagen, daher muss der Benutzer sie manuell hinzufügen.

Siehe Browser/HTML Force download of image from src="data:image/jpeg;base64..."

Seite Mein Test html ist http://kuitsi.bitbucket.org/stackoverflow12113616.html

Verwandte Themen