当前位置: 首页 > news >正文

vue预览各种格式图片png jpg tif tiff dcm

// 没有图片展示暂无 有图片,判断格式 png jpg 直接展示 tif tiff需要转化成png展示 dcm需要用到插件
<el-col :span="16"><div style="width:100%;text-align: center;margin-bottom: 10px;">图件预览</div><div style="width: 100%;height: 300px;display: flex;justify-content: center;" v-if="img5"><div class="up_img">暂无</div></div><div style="width: 100%; height: 100% ;display: flex;justify-content: center;align-items: center;cursor: pointer;" v-if="!img5"><div style="width:300px;height: 300px;" v-if="isDcm"><Cornerstone :img="dcmImg" v-if="isDcmTrue"></Cornerstone></div><el-image style="width: 300px; height: 300px;" :src="dcmImg" v-if="!isDcm"></el-image></div>
</el-col>// 循环下载文件getFile(id, type) {this.isDcmTrue = false//后端返回是文件id的数组,需要自己去用文件id调文件下载的接口sliceFileDownload(id).then((res) => {let list = []if (res.data.partList) {res.data.partList.map((item) => {let instance = axios.create({responseType: 'blob',})instance.get(`${item.fileDownloadUrl}`).then((info) => {list.push(info.data)if (res.data.partCount == list.length) {let blob = new Blob(list);let link = document.createElement('a');link.href = window.URL.createObjectURL(blob);if (this.upImgType == 'img') {this.dcmImg = link.href} else if (this.upImgType == 'tif' || this.upImgType == 'tiff') var that = thisinfo.data.arrayBuffer().then((arrayBuffer) => {const tiff = new Tiff({buffer: arrayBuffer,});that.dcmImg = tiff.toDataURL("image/png")//转成png格式的base64图片,将其用img标签展示即可console.log(tiff.toDataURL("image/png"))})}else if (this.upImgType == 'dcm') {this.dcmImg = link.hrefthis.isDcm = truethis.isDcmTrue = true}}})})}})},
// tiff tif 转化需要用到插件
npm i tiff.js --save
import Tiff from 'tiff.js';
//info.data是后端返给你的blob文件流
info.data.arrayBuffer().then((arrayBuffer) => {const tiff = new Tiff({buffer: arrayBuffer,});that.dcmImg = tiff.toDataURL("image/png")//转成png格式的base64图片,将其用img标签展示即可console.log(tiff.toDataURL("image/png"))
})
// dcm文件的组件再之前的文章里有完整代码,复制下来直接可以用

相关文章:

vue预览各种格式图片png jpg tif tiff dcm

// 没有图片展示暂无 有图片&#xff0c;判断格式 png jpg 直接展示 tif tiff需要转化成png展示 dcm需要用到插件 <el-col :span"16"><div style"width:100%;text-align: center;margin-bottom: 10px;">图件预览</div><div style&quo…...

出入库管理系统vue2前端开发服务器地址配置

【精选】vue.config.js 的完整配置&#xff08;超详细&#xff09;_vue.config.js配置_web学生网页设计的博客-CSDN博客 本项目需要修改两处&#xff1a; 1、vue开发服务器地址&#xff1a;config\index.js use strict // Template version: 1.3.1 // see http://vuejs-templa…...

民安智库(第三方满意度调研公司):助力奢侈品品牌提升客户满意度

在奢侈品行业中&#xff0c;客户满意度是衡量品牌价值和市场竞争力的关键因素。为了准确了解客户的需求和反馈&#xff0c;民安智库&#xff08;北京第三方社会调查评估&#xff09;以其专业的满意度调查方法&#xff0c;受委托对某奢侈品品牌进行全面的客户满意度调查。 此次…...

蓝牙特征值示例1-迈金L308自行车尾灯夜骑智能表情尾灯的

了解商品级蓝牙特征值 1 服务器&#xff08;设备&#xff09;描述 0x02-01-06 05-03-0F180A18 09-FF-FFFF166B001C0101 0A-09-4C3330385F37393937 01设备标识 03服务UUID FF厂商自定义数据(厂家编号&#xff1a;FFFF-166B001C0101) 完整设备名称&#xff1a; L308-7997 2 服…...

Three 笔记

一&#xff1a;常用函数封装 1、实例化three 场景、相机、渲染器 import * as THREE from three;/*** 实例化three 场景、相机、渲染器* param container: dom容器 * param fov: 视野角度 * param near: 相机视锥体近裁截面相对相机的距离 * param far: 相机视锥体远裁截面相…...

Crypto | Affine password 第二届“奇安信”杯网络安全技能竞赛

题目描述&#xff1a; 明文经过仿射函数y3x9加密之后变为JYYHWVPIDCOZ&#xff0c;请对其进行解密&#xff0c;flag的格式为flag{明文的大写形式}。 密文&#xff1a; JYYHWVPIDCOZ解题思路&#xff1a; 1、使用在线网站直接破解或手工计算破解&#xff0c;获得flag。&#xf…...

android使用notification消息通知(工具类封装)

代码直接复制粘贴就可以用了&#xff0c;参数可以更具自己需求添加 private NotificationManager manager;private Notification notification;private static final String NORMAL_CHANNEL_ID "my_notification_normal";private static final String IMPORTANT_CHA…...

PicoDiagnostics (NVH设备软件)-PS软件设置文件类型介绍

作为远程技术指导人员&#xff0c;下面这个功能对你来说可能非常有帮助。 在PicoScope 7 软件的文件保存格式里&#xff0c;通常选择的是<PS 数据文件>类型&#xff0c;容易忽略其他实用的保存文件类型&#xff0c;下面我们介绍<PS设置文件>类型。 PS 数据文件&…...

Linux 定时删除7天前的文件

一、编写脚本 #!/bin/bash find /home/kafka/logs -mtime 10 -name "*.*" -exec rm -rf {} \;保存到home目录下的logs_delete.sh 二、解释 # 命令格式 find 对应目录 -mtime 天数 -name "文件名" -exec rm -rf {} \; # 示例命令&#xff0c;将/home/kaf…...

VISA机制

需要用到VISA的3种机制&#xff1a;属性机制、锁定机制和事件机制。以写资源为例&#xff0c;3种机制的作用如图 &#xff08;1&#xff09;属性机制 属性机制用来控制资源的各种属性&#xff0c;这些属性分为两种&#xff1a;只读属性和可读可写属性。 &#xff08;2&#xf…...

基于开源项目OCR做一个探究(chineseocr_lite)

背景&#xff1a;基于图片识别的技术有很多&#xff0c;应用与各行各业&#xff0c;我们公司围绕电子身份证识别自动录入需求开展&#xff0c;以下是我的研究心得 技术栈&#xff1a;python3.6&#xff0c;chineseocr_lite的onnx推理 环境部署&#xff1a;直接上截图&#xff…...

工作常遇,Web自动化测试疑难解答,测试老鸟带你一篇打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、自动化测试中隐…...

H5判断当前环境是否为微信小程序

H5判断当前环境是否为微信小程序 场景代码 场景 H5需要判断当前环境是否为微信小程序&#xff0c;然后做一些交互调整。 代码 isWxMiniCodeWebviewEnv() {return navigator.userAgent.match(/miniprogram/i) || window.__wxjs_environment miniprogram }...

桌面云架构讲解(VDI、IDV、VOI/TCI、RDS)

目录 云桌面架构 VDI 虚拟桌面基础架构 IDV 智能桌面虚拟化 VOI/TCI VOI 虚拟系统架构 TCI 透明计算机架构 RDS 远程桌面服务 不同厂商云桌面架构 桌面传输协议 什么是云桌面 桌面云是虚拟化技术成熟后发展起来的一种应用&#xff0c;桌面云通常也称为云桌面、VDI等 …...

计算图片中两个任意形状多边形相交部分的大小

一张图片中两个任意多边形相交的面积计算方法。本文参考https://blog.csdn.net/PanYHHH/article/details/110940428&#xff1b;加了一个简单的示例&#xff0c;也对代码做了一点清淅化。原博客中还有其他链接&#xff0c;是C代码&#xff0c;没有看原理&#xff0c;但以下代码…...

JavaScript的函数

在JavaScript中&#xff0c;函数是一种强大而灵活的工具&#xff0c;它们不仅可以执行特定的任务&#xff0c;还可以作为变量、参数和返回值进行传递。本文将介绍JavaScript函数的各个方面&#xff0c;包括函数的定义和调用、函数参数和返回值、匿名函数和箭头函数&#xff0c;…...

stm32 - Cortex

stm32 - Cortex 概念Cortex-M4 的工作模式和工作状态寄存器 概念 Cortex-M4 的工作模式和工作状态 处理模式 当处理器发生了异常或者中断&#xff0c;则进入处理模式进行处理&#xff0c;处理完成后返回到线程模式 权限大&#xff0c;访问处理器中所有的资源 线程模式 芯片复…...

计算机组成原理之概述

概述 计组主要讲的是计算机的硬件实现方式。 机器字长 比如8080处理器&#xff0c;如果想处理16位数的整数运算&#xff0c;就需要执行两次。 可见&#xff0c;机器字长会影响到数据的处理速度。 计算机硬件的基本组成 早期的冯诺依曼机 冯诺依曼提出了“存储程序”的概念&…...

思维导图软件 Xmind mac中文版软件特点

XMind mac是一款思维导图软件&#xff0c;可以帮助用户创建各种类型的思维导图和概念图。 XMind mac软件特点 - 多样化的导图类型&#xff1a;XMind提供了多种类型的导图&#xff0c;如鱼骨图、树形图、机构图等&#xff0c;可以满足不同用户的需求。 - 强大的功能和工具&#…...

群晖 DSM 7.0 Synology Photos IOS | Android 客户端下载

安卓版本低-官方说明&#xff1a;https://www.synology.com/zh-tw/dsm/7.1/software_spec/synology_photos Synology Photos Android 客户端下载大全&#xff1a; https://archive.synology.cn/download/Mobile 官网-Synology Photos | 群暉科技 Synology Inc. 全新的 DSM…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

C++_哈希表

本篇文章是对C学习的哈希表部分的学习分享 相信一定会对你有所帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、基础概念 1. 哈希核心思想&#xff1a; 哈希函数的作用&#xff1a;通过此函数建立一个Key与存储位置之间的映射关系。理想目标&#xff1a;实现…...