首页 > 解决方案 > 将 blob 文件从 tiff 转换为 png 以在浏览器上显示

问题描述

我使用以下函数将 base64 编码的二进制数据转换为 blob 对象。它工作正常,但是当格式为 tiff 文件时,它不会显示在浏览器上。

我只能下载它(从开发工具)并将其转换为 PNG 并使用 windows 照片查看器打开它来查看它。如何将该 tiff 文件转换为一种格式以便能够在浏览器上查看它?

功能

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {
const byteCharacters = atob(b64Data);
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  const slice = byteCharacters.slice(offset, offset + sliceSize);

  const byteNumbers = new Array(slice.length);
  for (let i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);
  }

  const byteArray = new Uint8Array(byteNumbers);
  byteArrays.push(byteArray);
}

const blob = new Blob(byteArrays, {type: contentType});
return blob;
}

用法:

<script>
  var mime_type = '{{get_blob_instance.mime_type}}' //when image/tiff we have issue
  var blob = b64toBlob('{{get_blob_instance.return_blob_base64}}',mime_type)
  var blobUrl = URL.createObjectURL(blob)
    
  $('#obj_div').html(`<object width="100%" height="100%" type="${mime_type}" data="${blobUrl}"></object>`)
</script>

标签: javascriptimageblob

解决方案


推荐阅读