vue实现base64格式转换为图片

news/2024/4/24 16:13:08/文章来源:https://blog.csdn.net/IT13333/article/details/136509740

找了很多,但是都不太好用,打算自己总结一个保姆级教学,无需动脑,电脑有电就能实现

在HTML部分,我们需要一个标签来放置图片

<template><div><img :src="imageSrc" alt="未获取到图片" /></div>
</template>

其次,我们需要引入ref

<script>
import { ref } from 'vue';export default {setup() {const base64Data = ref('把我换成base64数据!!!'); // 替换成你的base64图像数据const imageSrc = ref('');const convertBase64ToImage = () => {const img = new Image();img.src = base64Data.value;img.onload = () => {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = img.width;canvas.height = img.height;context.drawImage(img, 0, 0);const imageURL = canvas.toDataURL('image/png');imageSrc.value = imageURL;};};convertBase64ToImage();return {imageSrc};}
};
</script>

如果在script标签中用setup那更简单,HTML的部分不变(保姆级教学教到底)

<script setup>
import { ref } from 'vue';const base64Data = ref('data:image/png;base64,iVBORw0KG...'); // 替换成你的base64图像数据
const imageSrc = ref('');const convertBase64ToImage = () => {const img = new Image();img.src = base64Data.value;img.onload = () => {const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = img.width;canvas.height = img.height;context.drawImage(img, 0, 0);const imageURL = canvas.toDataURL('image/png');imageSrc.value = imageURL;};};convertBase64ToImage();
</script>

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

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

相关文章

VGW在 Windows 平台上局域网就绪的旁路由器程序

在查阅本篇文章之前可以查看下&#xff0c;本人前两年写的关于VGW软件路由器的文章 Linux 平台上面单网卡 TUN/TAP实现局域网其它设备上网_linux 物理网卡与tun同网段-CSDN博客 VGW软件路由器是一个工作IEEE以太网&#xff08;L2&#xff09;链路层的路由器程序&#xff0c;它…

哪个牌子宠物空气净化器好?质量好的宠物空气净化器推荐

即使我们很爱自家的宠物&#xff0c;但我们也无法否认处理房间里飘荡的宠物毛发和皮屑&#xff0c;以及那些令人不快的气味&#xff08;比如地毯上的意外和垃圾桶里的气味&#xff09;的挑战。对于过敏患者来说&#xff0c;这几乎是无法忍受的。寻找有效的方法来减少这些问题对…

利用axios库在Node.js中进行代理请求的实践

前言 随着互联网的蓬勃发展&#xff0c;Web应用程序越来越依赖于从外部服务器获取数据。在这个过程中&#xff0c;我们经常需要通过代理服务器来访问外部资源。本文将介绍如何充分利用axios库&#xff0c;在Node.js中进行代理请求的最佳实践&#xff0c;并通过一个实际案例来展…

【NVCC,CUDA,NVIDIA驱动】装了pytorch,nvcc -V不能用,但能正常使用gpu

这里写目录标题 问题描述问题原理为什么anaconda安装的Pytorch&#xff0c;其能够直接在gpu上运行NVCC是什么&#xff0c;怎么查看装没装 如果没有NVCC文件夹&#xff0c;应该如何安装NVCC&#xff1f;CUDNN&#xff1a;Local Installer for Linux x86_64和Local Installer for…

单例模式及应用场景

如果希望自己的代码更优雅、可维护性更高以及更简洁&#xff0c;往往离不开设计模式这一解决方案。 在JS设计模式中&#xff0c;最核心的思想&#xff1a;封装变化&#xff08;将变与不变分离&#xff0c;确保变化的部分灵活&#xff0c;不变的部分稳定&#xff09;。 那么来…

ssm基于javaEE+springboot校园闲置二手物品拍卖交易平台_ngad7

为提升浏览用户观感及使用体验&#xff0c;本系统要具有易用性和美观性。通过页面的简单提示就可完成操作&#xff0c;校园闲置物品交易平台展示界面应该清楚简洁&#xff0c;使用户通过美观的前台页面能快速定位想要浏览的校园闲置物品交易平台信息。后台界面也应简约&#xf…

YOLOv5创新改进:SPPF创新涨点篇 | SPPELAN:SPP创新结合ELAN ,效果优于SPP、SPPF| YOLOv9

💡💡💡本文独家改进:新颖SPPF创新涨点改进,SPP创新结合ELAN,来自于YOLOv9,助力YOLOv5,将SPPELAN代替原始的SPPF 💡💡💡在多个私有数据集和公开数据集VisDrone2019、PASCAL VOC实现涨点 收录 YOLOv5原创自研 https://blog.csdn.net/m0_63774211/category_12…

基于ACM32 MCU的两轮车充电桩方案,打造高效安全的电池管理

随着城市化进程的加快、人们生活水平的提高和节能环保理念的普及&#xff0c;越来越多的人选择了电动车作为代步工具&#xff0c;而两轮电动车的出行半径较短&#xff0c;需要频繁充电&#xff0c;因此在城市中设置两轮车充电桩就非常有必要了。城市中的充电桩不仅能解决两轮车…

Linux 之三:CentOS7 目录结构 和 日期及时区设置

Linux 目录 以下是对这些目录的解释&#xff1a; /bin&#xff1a;bin是Binary的缩写, 这个目录存放着最经常使用的命令。/boot&#xff1a; 这里存放的是启动Linux时使用的一些核心文件&#xff0c;包括一些连接文件以及镜像文件。/dev &#xff1a; dev是Device(设备)的缩写…

深度学习1:神经网络原理与算法详解

一、神经网络&#xff1a;模拟大脑的信息处理机制 神经网络&#xff0c;作为深度学习的基础&#xff0c;其灵感来源于人脑神经元之间的复杂连接和信号传递方式。在神经网络中&#xff0c;每个神经元都是一个计算单元&#xff0c;它接收来自其他神经元的输入信号&#xff0c;并…

RabbitMQ 交换器

RabbitMQ 交换器 官方例子 http://www.rabbitmq.com/getstarted.html direct 如上图所示&#xff0c;两个队列绑定到了direct交换器上&#xff0c;第一个队列绑定的 binding key 为 orange &#xff0c;第二个队列有两个绑定&#xff0c;分别是 black 和 green 。 如上图所示…

Three.js--》探寻Cannon.js构建震撼的3D物理交互体验(二)

我们用three.js可以绘制出各种酷炫的画面&#xff0c;但是当我们想要一个更加真实的物理效果的话&#xff0c;这个时候我们就需要一个物理的库&#xff0c;接下来我们就讲解一下今天要学习的canon&#xff0c;它可以给我们提供一个更加真实的物理效果&#xff0c;像物体的张力、…

Django学习记录08——图表及文件上传案例

1.图表Echarts的应用 Apache ECharts 1.1 使用方法 引用echarts.js即可到官方文档中查询使用 1.2 常用图标的使用 图表展示页面的部署&#xff08;主要展示折线图、柱状图、饼图&#xff09; {% block content %}<div class"container"><div class&qu…

Java单测Mock升级实践

Java单测Mock升级实践 一、背景 众所周知&#xff0c;单元测试是改善代码质量&#xff0c;提升研发交付品质的手段之一&#xff0c;能否写出好的单元测试用例&#xff0c;也是衡量我们研发专业性的标准之一。所以&#xff0c;想要成为一名合格的研发&#xff0c;就应该要有编…

Android Studio中debug功能详解

本文为大家分享了Android Studio debug功能的具体使用方法&#xff0c;供大家参考&#xff0c;具体内容如下 运行debug模式 \1. 进入debug – 点击图中红色圆圈圈起的左边绿色按钮&#xff0c;运行app的debug模式&#xff0c;快捷键ShiftF9 – 点击图中红色圆圈圈起的右边按…

【异常处理】Vue报错 Component template should contain exactly one root element.

问题描述 启动VUE项目后控制台报错&#xff1a; Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.翻译为&#xff1a;组件模板应该只包含一个根元素 查看vue代码&#xff0…

恢复IDEA误删除的git提交,提交被删除,尝试恢复提交

​​​​​​ dgqDESKTOP-JRQ5NMD MINGW64 /f/IdeaProjects/workspace/spzx-parent ((8bb112e...)) $ git reflog 8bb112e (HEAD, origin/master, master) HEAD{0}: checkout: moving from master to 8bb112e5ac18dfe4bbd64adfd06363e46b609f21 8bb112e (HEAD, origin/master, …

Objective-C blocks 概要

1.block的使用 1.1什么是block&#xff1f; Blocks是C语言的扩充功能&#xff1a;带有自动变量&#xff08;局部变量&#xff09;的匿名函数。 “带有自动变量”在Blocks中表现为“截取自动变量" “匿名函数”就是“不带名称的函数” 块&#xff0c;封装了函数调用及调用…

【LeetCode:98. 验证二叉搜索树 + 递归】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【树上倍增】【割点】 【换根法】3067. 在带权树网络中统计可连接服务器对数目

作者推荐 视频算法专题 本文涉及知识点 树上倍增 树 图论 并集查找 换根法 深度优先 割点 LeetCode3067. 在带权树网络中统计可连接服务器对数目 给你一棵无根带权树&#xff0c;树中总共有 n 个节点&#xff0c;分别表示 n 个服务器&#xff0c;服务器从 0 到 n - 1 编号…