VUE中如何将tiff图片显示在浏览器中
**VUE中如何将tiff图片显示在浏览器中**https://github.com/FireGuo/text.git下载tiff.js在index中引入mounted() {//调用方法this.loadImage('../../static/pictif.tif');},methods:{loadImage(...
·
**
VUE中如何将tiff图片显示在浏览器中
**
下载tiff.js
在index中引入
mounted() {
//调用方法
this.loadImage('../../static/pictif.tif');
},
methods:{
loadImage(filename) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', filename);
xhr.onload = function (e) {
var tiff = new Tiff({buffer: xhr.response});
var width ='200px';
var height ='200px';
var canvas = tiff.toCanvas();
if (canvas) {
//这里视个人情况修改
canvas.setAttribute('style', 'width:' + (width*0.3) +
'px; height: ' + (height*0.3) + 'px');
var elem = document.createElement("div");
elem.innerHTML ='<div><a href="' + filename + '">' + filename +
' (width: ' + width + ', height:' + height + ')' +
'</a></div>';
document.body.append(elem);
document.body.append(canvas);//重点是将canvas添加到视图中
//上面视个人情况修改
}
};
xhr.send();
}}
效果图如下
更多推荐
已为社区贡献1条内容
所有评论(0)