javascript - 在 Android 浏览器中将图像渲染为数据流

Question

我整理了一个小test web app将 HTML Canvas 转换为图像(通过使用 Nihilogic 的 canvas2image JavaScript 库)，然后用生成的图像替换 Canvas 并显示一条消息，通知用户触摸(长按)该图像以保存它到他们的电话。

我遇到的问题是 Android 的默认网络浏览器(“Internet”)不呈现表示图像的 base64 编码数据流，而是显示一个问号符号。有办法解决这个问题吗？如果是，那么如何？

Answer 1

使用自定义 ContentProvider 并覆盖 openFile() 以将流作为临时文件返回。

可以在html A 标签中使用URI 作为src。

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