- 使用的插件是
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.result
const 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