在vue项目中试用el

您所在的位置：网站首页 › TIF转换只有一页 › 在vue项目中试用el

在vue项目中试用el

2024-02-02 01:19| 来源: 网络整理| 查看: 265

依赖：

tiff.js

思路：

1、使用 scoped-slot 去设置缩略图模版。

2、在缩略图自定义插槽中，试用tiff.js将图片转换显示。

问题：

由于tiff.js转换tif/tiff格式的图片的时候是异步的，所以自定义一个支持异步加载图片的组件

代码：

定义一个可以异步加载图片的组件（thumbnail.vue）

import Tiff from 'tiff.js'; export default { name: "thumbnail", props: { file: { type: Object, required: true } }, data() { return { src: '' }; }, created() { // 判断是不是tif数据格式，如果是，则试用tif.js处理 let isTif = ['image/tiff', 'image/tif'].includes(this.file.raw.type); if (isTif) { var xhr = new XMLHttpRequest(); xhr.responseType = 'arraybuffer'; xhr.open('GET', this.file.url); xhr.onload = (e) => { var tiff = new Tiff({ buffer: xhr.response }); var canvas = tiff.toCanvas(); this.src = canvas.toDataURL(); }; xhr.send(); } else { this.src = this.file.url; } } };

在需要的地方试用thumbnail.vue

【本文地址】

在vue项目中试用el

在vue项目中试用el

今日新闻

推荐新闻