Hiển thị hình ảnh dưới dạng luồng dữ liệu trong trình duyệt Android

Question

Tôi đặt cùng một hình nhỏ test web app chuyển đổi canvas HTML thành hình ảnh (bằng cách sử dụng thư viện JavaScript canvas2image của Nihilogic), sau đó thay thế canvas bằng hình ảnh được tạo và hiển thị thông báo người dùng chạm vào (dài) hình ảnh đó để lưu nó vào điện thoại của họ.

Vấn đề tôi gặp phải là trình duyệt web mặc định của Android ("Internet") không hiển thị luồng dữ liệu được mã hóa base64 đại diện cho hình ảnh, nhưng hiển thị dấu hỏi chấm thay thế. Có cách nào để giải quyết vấn đề này không? Nếu có, thì làm thế nào?

Answer 1

Sử dụng trình ContentProvider tùy chỉnh và ghi đè openFile() để trả về luồng dưới dạng Tempfile.

Bạn có thể sử dụng URI làm src trong thẻ 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(); 
      } 
     } 
    } 
} 

Answer 2

Dựa trên nhận xét của hình ảnh @goldenparrot có thể được nhìn thấy với

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

(và cũng với css gợi ý background-image) khi dữ liệu base64 đã có mặt khi trang được tải . Tuy nhiên, nó không hoạt động vì một số lý do khi chính xác cùng chuỗi dữ liệu được nhập động. Ngay cả hình ảnh được tải tĩnh với dữ liệu base64 có vấn đề: nó không phản ứng với cú nhấp chuột dài theo bất kỳ cách nào, vì vậy nó không thể được tải xuống. Tôi đang sử dụng Android 2.3.6.

Chỉnh sửa: Bạn cũng có thể thử thêm thêm link download

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

nhưng nó đã không làm việc cho tôi. Android đã chỉ hiển thị nội dung của tệp đó dưới dạng văn bản. Trình duyệt web thông thường trên máy tính để bàn đã mở hộp thoại "tải xuống tệp" nhưng không đề xuất bất kỳ phần mở rộng nào cho tệp đó, vì vậy, người dùng phải thêm nó theo cách thủ công.

Xem thêm Browser/HTML Force download of image from src="data:image/jpeg;base64..."

trang html thử nghiệm của tôi là http://kuitsi.bitbucket.org/stackoverflow12113616.html