前端在线预览 tiff 格式的图片

使用的插件是 tiff.js，最终是把 tiff 转成 canvas 或 base64 实现预览

简单写个Demo

<div id="drop"><p>Drop TIFF file here!</p>
</div>
<div class="img-box"><img id="img" src="" />
</div>

#drop p {text-align: center;border: 1px dashed #ccc;height: 200px;line-height: 200px;
}
.img-box {max-width: 1200px;margin: 0 auto;
}
.img-box img {width: 100%;
}

// 引包
<script src="./tiff.min.js"></script><script>const elm = document.getElementById("drop")const img = document.getElementById("img")elm.addEventListener("dragenter", e => e.preventDefault())elm.addEventListener("dragover", e => e.preventDefault())elm.addEventListener("drop", e => {e.preventDefault()const file = e.dataTransfer.files[0];const reader = new FileReader();reader.addEventListener("load", e => {const arrayBuffer = e.target.resultconst tiff = new Tiff({buffer: arrayBuffer})// const canvas = tiff.toCanvas() // 使用canvas调此方法const imgData = tiff.toDataURL() // 使用base64调此方法img.src = imgData})reader.readAsArrayBuffer(file)})
</script>

更多使用方法请查询官方文档 https://github.com/seikichi/tiff.js

前端在线预览 tiff 格式的图片相关推荐

前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
web项目使用OpenOffice实现前端在线预览office文档(超详细)
超详细的OpenOffice实现前端在线预览office文档记录最近搞一个数字化共享平台,是一个java web项目,使用框架ssm,其中项目有一个需要在线预览PDF.excle.ppt.word文 ...
Django在线预览docx格式的word文档
Django在线预览docx格式的word文档第一步明确功能是:预览word的docx文件. 具体实现是:在Django的模板文件中,定义预览方法:read_word2html from pydo ...
web项目移动端在线预览(word格式转html)
最近项目中遇到一个需求,需要在手机端实现对pc端上传的附件进行在线预览,整理了一下实现方案,仅供参考首先是最常见的我word在线预览,这里使用的是com.aspose.words这个jar包(其他格 ...
前端在线预览PDF文件
如何在vue项目中预览PDF格式的文件需求:在vue3.x项目中预览pdf文件提供以下三种方案: 1.Vue-pdf:适用于vue2.x版本,vue3.x需要改一些源码(vue2.x项目极力推荐, ...
实现PPT在线预览，PPT转图片方案
一.PPT转图片可行方案探索历程 PPT转图片方案方案具体步骤及分析已放弃方案 poi(失真度太高):Aspose直接转图片(收费,效果较好,备选):微软Office Online(需要基于Win ...
畅写Office云端SDK ：“硬核”赋予企业应用在线文档I在线协作编辑I在线预览I在线格式转换服务
畅写Office是北京稻壳互联数据科技有限公司旗下云端服务产品, 其云服务团队经过数月的努力,国内首次实现Office公有云SDK(类似微软Office365 SDK服务),以支持更多企业SAAS公有 ...
WEB在线预览PDF
这是我在博客园发表的第一篇文章.以后会陆续把在线预览其他格式文档的解决方案发表出来. 解决思路:把pdf转换成html显示. 在线预览pdf我暂时了解3种解决方案,欢迎大家补充. 方案一: 利用pdf ...
文件在线预览功能（office文件）
由于项目的功能需要看了一下文件预览的功能实现,主要是看office的word,excel,ppt这些的在线预览. 比较常见的是以下两种: 一.通过iframe直接引用微软提供的方法(最简单) < ...

前端在线预览 tiff 格式的图片

前端在线预览 tiff 格式的图片相关推荐

最新文章

热门文章