javascript - Render Image as Data stream in Android browser - Stack Overflow

admin管理员组

文章数量:1415145

I put together a small test web app that converts an HTML canvas to an image (by using Nihilogic's canvas2image JavaScript library), then replaces the canvas with the generated image and displays a message notifying the user to touch (long) that image in order to save it to their phone.

The problem I came across is that Android's default web browser ("Internet") doesn't render the base64 encoded data stream that represents the image, but displays a question mark sign instead. Is there a way to resolve this? If yes, then how?

I put together a small test web app that converts an HTML canvas to an image (by using Nihilogic's canvas2image JavaScript library), then replaces the canvas with the generated image and displays a message notifying the user to touch (long) that image in order to save it to their phone.

The problem I came across is that Android's default web browser ("Internet") doesn't render the base64 encoded data stream that represents the image, but displays a question mark sign instead. Is there a way to resolve this? If yes, then how?

• javascript
• android
• html5-canvas

Share Improve this question Follow edited Sep 1, 2012 at 9:59 Swayam 16.4k1414 gold badges6565 silver badges102102 bronze badges asked Aug 24, 2012 at 16:53 Andrei OnigaAndrei Oniga 8,5791717 gold badges5454 silver badges9191 bronze badges 2

• What Android version are you running? It works in Jelly Bean (4.1.1). I can generate the image from canvas and can save it without problems. – alex Commented Sep 5, 2012 at 18:31
• can you try and see if creating a div with css style background-image: url(data:image/png;base64datahere....); works instead of creating a img with src? – Prasanth Commented Sep 6, 2012 at 4:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +25

Use a custom ContentProvider and override openFile() to return the stream as a Tempfile.

You can use the URI as the src in the html A tag.

<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.press(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();
            }
        }
    }
}

Based on ment of @goldenparrot image can be seen with

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

(and also with suggested css background-image) when base64 data is already present when page is loaded. However, it does not work for some reason when exactly the same data string is inputted dynamically. Even statically loaded image with base64 data has problems: it does not react to long click in any way, so it can't be downloaded. I'm using Android 2.3.6.

Edit: You can also try adding additional download link

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

but it didn't work for me. Android did just show contents of that file as text. Normal desktop web browser did open "download file" dialog but did not suggest any extension for that file, so user must add it manually.

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

My test html page is http://kuitsi.bitbucket/stackoverflow12113616.html

本文标签： javascriptRender Image as Data stream in Android browserStack Overflow