vue实现展示并下载后端返回的图片流

// 点击下载  downLoadCode() {const image = new Image();image.setAttribute("crossOrigin", "anonymous");image.onload = () => {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据const a = document.createElement("a"); // 生成一个a元素const event = new MouseEvent("click"); // 创建一个单击事件a.download = `${this.rowData.deviceName}二维码`; // 设置图片名称(todo 根据你实际项目修改)a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = this.codeUrl;}

完整代码

<template><el-dialog:destroy-on-close="true":close-on-click-modal="false":title="title":visible.sync="dialogVisible"width="600px"@close="dialogVisible = false"><divstyle="display: flex;flex-direction: column;justify-content: center;align-items: center;"><img :src="codeUrl" class="codeImg" alt="" /><div class="download" @click="downLoadCode"><i class="iconfont if-xiazai" /><span>点击下载二维码</span></div></div></el-dialog>
</template><script>
import { getQrCode } from "@/api/infoManage/deviceManage/deviceManage";
export default {data() {return {codeUrl: "",dialogVisible: false,title: "",rowData: {}};},methods: {showDialog(data) {this.dialogVisible = true;this.title = data.title;this.rowData = data.data;this.handleCode(data.data);},handleClose() {this.dialogVisible = false;this.codeUrl = "";},/*** 生成二维码* */handleCode(content) {let data = {content: content.id};getQrCode(data).then(res => {const blob = new Blob([res.data], { type: "image/png" });this.codeUrl = window.URL.createObjectURL(blob);}).catch(err => {console.log(err);});},/*** 下载二维码* */downLoadCode() {const image = new Image();image.setAttribute("crossOrigin", "anonymous");image.onload = () => {const canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;const context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);const url = canvas.toDataURL("image/png"); // 得到图片的base64编码数据const a = document.createElement("a"); // 生成一个a元素const event = new MouseEvent("click"); // 创建一个单击事件a.download = `${this.rowData.deviceName}二维码`; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = this.codeUrl;}}
};
</script><style lang="scss" scoped>
.download {font-size: 14px;font-family: MicrosoftYaHei;color: #1492ff;margin-bottom: 48px;cursor: pointer;text-align: center;display: flex;align-items: center;justify-content: center;i {margin-right: 5px;}
}
</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886595.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-04

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-04 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-04目录1. Alopex: A Computational Framework for Enabling On-Device Function Calls with LLMs摘要&#xff1a;研究背景&…

Python 人脸检测:使用 Dlib 和 OpenCV

简介 本文用Python、Dlib 和 OpenCV 库来检测图像中的人脸&#xff0c;并在人脸上绘制矩形框进行窗口显示。 环境准备 在开始之前&#xff0c;请确保您的计算机上已安装 Python。此外&#xff0c;您还需要安装以下库&#xff1a; dlib&#xff1a;一个包含多种机器学习算法…

JavaScript逆向爬虫教程-------基础篇之JavaScript密码学以及CryptoJS各种常用算法的实现

目录 一、密码学介绍 1.1 为什么要学密码学?1.2 密码学里面学哪一些 二、字符编码三、位运算四、Hex 编码与 Base64 编码 4.1 Hex 编码4.2 Base64 编码 五、消息摘要算法 5.1 简介5.2 JS中的MD5、SHA、HMAC、SM3 六、对称加密算法 6.1 介绍6.2 加密模式和填充方式6.3 CryptoJ…

go语言中的切片含义和用法详解

Go 语言中的切片&#xff08;slice&#xff09;是引用类型&#xff0c;它提供了一种灵活的方式去操作一系列具有相同类型的数据。与数组不同&#xff0c;切片的长度不是固定的&#xff0c;可以动态地增长或缩小。切片在 Go 语言中非常常用&#xff0c;因为它们提供了高效且方便…

使用 OpenAI 进行数据探索性分析(EDA)

#探索性数据分析&#xff08;Exploratory Data Analysis, 简称 EDA&#xff09;是数据分析中不可或缺的环节&#xff0c;帮助分析师快速了解数据的分布、特征和潜在模式。传统的 EDA 通常需要手动编写代码或使用工具完成。现在&#xff0c;通过 OpenAI 的 GPT-4 模型&#xff0…

【软考】系统架构设计师-数据库设计基础

数据库核心考点 三级模式-两级映射 外模式--视图 概念模式--表&#xff08;模式、基本表&#xff09; 内模式--物理文件 数据库设计 概念结构设计&#xff1a;属性冲突、命名冲突、结构冲突 逻辑结构设计&#xff1a;关系模式&#xff08;层次模型、网络模型&#xff09…

2、计算机网络七层封包和解包的过程

计算机网络osi七层模型 1、网络模型总体预览2、数据链路层4、传输层5.应用层 1、网络模型总体预览 图片均来源B站&#xff1a;网络安全收藏家&#xff0c;没有本人作图 2、数据链路层 案例描述&#xff1a;主机A发出一条信息&#xff0c;到路由器A&#xff0c;这里封装目标MAC…

图像重建之深度学习重建

图像重建是计算机视觉领域的一个重要任务。深度学习在图像重建中具有很强的能力和广泛的应用。下面介绍一种常见的深度学习图像重建方法&#xff1a;基于生成对抗网络&#xff08;Generative Adversarial Networks&#xff0c;GANs&#xff09;的图像重建。 基于 GAN 的图像重…

使用 PyTorch-BigGraph 构建和部署大规模图嵌入的完整教程

当涉及到图数据时&#xff0c;复杂性是不可避免的。无论是社交网络中的庞大互联关系、像 Freebase 这样的知识图谱&#xff0c;还是推荐引擎中海量的数据量&#xff0c;处理如此规模的图数据都充满挑战。 尤其是当目标是生成能够准确捕捉这些关系本质的嵌入表示时&#xff0c;…

国标GB28181视频平台EasyCVR视频融合平台H.265/H.264转码业务流程

在当今数字化、网络化的视频监控领域&#xff0c;大中型项目对于视频监控管理平台的需求日益增长&#xff0c;特别是在跨区域、多设备、高并发的复杂环境中。EasyCVR视频监控汇聚管理平台正是为了满足这些需求而设计的&#xff0c;它不仅提供了全面的管理功能&#xff0c;还支持…

2411rust,正与整128

原文 长期以来,Rust在x86-32和x86-64架构上128位整数的对齐与C语言不一致.最近已解决此问题,但该修复带来了一些值得注意的效果. 作为用户,除非如下,否则不用担心: 1,假设i128/u128对齐,而不是用align_of 2,忽略improper_ctypes*检查,并在FFI中使用这些类. 除x86-32和x86-64…

C语言实现程序执行时间打印

一.概述 程序执行时间打印是优化程序的的重要手段&#xff0c;本文为用c接口实现打印时间的三种方法。本文程序均在qt5.12环境测试验证。 二.测试代码 1.方法一 使用 time() 测量秒数 #include <stdio.h> #include <time.h> int main() { // 获取操作前的当前时…

使用win32com将ppt(x)文件转换为pdf文件

本文来记录下如何使用win32com将ppt(x)文件转换为pdf文件 文章目录 win32com概述win32com优缺点代码实例本文小结 win32com概述 Pywin32 是一个用于与 Microsoft Windows 操作系统交互的 Python 扩展模块&#xff0c;它提供了对多个 Windows API 的访问&#xff0c;包括对 Mic…

java itext后端生成pdf导出

public CustomApiResult<String> exportPdf(HttpServletRequest request, HttpServletResponse response) throws IOException {// 防止日志记录获取session异常request.getSession();// 设置编码格式response.setContentType("application/pdf;charsetUTF-8")…

HarmonyOs实战项目=>App首页架构沉浸式效果

1.沉浸式效果方案采用> 窗口全屏布局方案不隐藏状态栏和导航条(不隐藏避让区) 2.沉浸式效果截图 3.主要代码截图 4.大功告成&#xff0c;代码见资源

深入解析 Vue 3 中的 defineExpose

深入解析 Vue 3 中的 defineExpose 在 Vue 3 的组合式 API&#xff08;Composition API&#xff09;中&#xff0c;defineExpose 是一个重要的辅助函数&#xff0c;专门用于在 <script setup> 模式下暴露组件内部的属性和方法给父组件使用。本文将详细解析 defineExpose…

Cesium 相机系统

Cesium 的相机系统是其 3D 地球渲染引擎的重要组成部分&#xff0c;它控制用户在虚拟地球上的视图和交互体验。Cesium 的相机系统具备灵活性和强大的功能&#xff0c;允许开发者自定义视图、导航和交互方式。以下是 Cesium 相机系统的主要特点和功能&#xff1a; 1. 相机的基本…

华为HCCDA云技术认证--网络服务

大家好呀&#xff01;我是reload。今天继续带大家学习华为HCCDA云技术认证&#xff0c;涵盖华为云最为核心的计算、存储、网络、数据库、安全、部署等服务。今天学习网络服务相关内容。 登录华为云官网&#xff1a;https://www.huaweicloud.com/ &#xff0c;进入首页&#xff…

面向对象几个自测题

选择题 1. 进行文件操作时,需要包含&#xff08;1&#xff09;_文件。 A&#xff09; iostream B&#xff09; fstream C&#xff09; stdio.h D&#xff09; stdlib.h 2. 若有定义&#xff1a;enum Weekday { sun7,mon1,tue,wed,thu,fri,sat }day;&#xff0c;以下…

如何提升自己的情商?

在当今社会&#xff0c;情商的重要性越来越被人们所认识和重视。无论是职场发展、人际关系&#xff0c;还是自我成长&#xff0c;情商都起着关键的作用。那么&#xff0c;如何提升自己的情商呢&#xff1f; 一、自我认知&#xff1a;了解自己&#xff0c;方能明智处世 自我认…