Ellia.Duan 发表于 2023-11-28 11:43:13

在google浏览器中上传Tiff图片

本帖最后由 Ellia.Duan 于 2023-12-25 15:24 编辑

由于在谷歌浏览器和火狐浏览器中无法识别Tiiff格式的图片,所以用谷歌浏览器打开SpreadJS后,发现无法上传Tiff图片。

本篇文章将介绍如何在SpreadJS中导入Tiff图片:
1、首先可以下载一个Lib包tiff.js,
2、其次在页面中设置一个导入按钮
<input id="selectedFile" type="file" name="files[]"
       accept='image/bmp,image/gif,image/jpeg,image/jpg,image/png,image/tiff'>
<button id="upload">上传图片</button>3、按钮点击后,对image类型进行判断,如果是Tiff类型,则需要用Tiff构造函数包装一下。如下代码
document.getElementById('upload').addEventListener('click', function () {
            var blob = document.querySelector('#selectedFile').files;
            if (!blob) {
                return;
            }
            var fileReader = new FileReader();
            if (blob.type == 'image/tiff') {
                fileReader.onload = function (e) {
                  let file = e.target.result
                  var tiff = new Tiff({buffer: file});
                  sheet.shapes.addPictureShape('pic2', tiff.toDataURL(), 80, 80, 150, 150);
                };
                fileReader.readAsArrayBuffer(blob)
            } else {
                fileReader.onload = function (e) {
                  let file = e.target.result
                  sheet.shapes.addPictureShape('pic1', file, 80, 80, 150, 150);
                };
                fileReader.readAsDataURL(blob)
            }
      })这样子就可以实现啦,可以查看下面的动图及附件:

页: [1]
查看完整版本: 在google浏览器中上传Tiff图片