前端在线预览 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.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