Render Image как поток данных в браузере Android

Я собрал небольшое тестовое веб-приложение, которое преобразует HTML-холст в изображение (используя Nihilogic canvas2image JavaScript-библиотека), затем заменяет холст сгенерированным изображением и отображает сообщение, уведомляющее пользователя касаться (долгого) этого изображения, чтобы сохранить его на своем телефоне.

Проблема, с которой я столкнулся, заключается в том, что веб-браузер Android по умолчанию ( "Интернет" ) не отображает поток данных с кодировкой base64, который представляет изображение, но вместо этого отображает знак вопроса. Есть ли способ разрешить это? Если да, то как?

Ответ 1

Используйте настраиваемый ContentProvider и переопределите openFile(), чтобы вернуть поток в качестве Tempfile.

Вы можете использовать URI как src в теге html A.

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

Ответ 2

На основе комментария изображения @goldenparrot можно видеть с помощью

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

(а также с предложенным css background-image), когда данные base64 уже присутствуют при загрузке страницы. Однако по какой-то причине это не работает, когда динамически вводится точно такая же строка данных. Даже статически загруженное изображение с данными base64 имеет проблемы: оно никак не реагирует на длительный щелчок, поэтому его нельзя загрузить. Я использую Android 2.3.6.

Изменить: вы также можете попробовать добавить дополнительную ссылку для скачивания

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

но это не сработало для меня. Android просто показывал содержимое этого файла в виде текста. Обычный веб-браузер рабочего стола открыл диалоговое окно "скачать файл", но не предлагал расширения для этого файла, поэтому пользователь должен добавить его вручную.

См. также Browser/HTML Force загрузка изображения из src=" data: image/jpeg; base64... "

Моя тестовая html-страница http://kuitsi.bitbucket.org/stackoverflow12113616.html