阿里云开发者社区

电脑版
提示:原网页已由神马搜索转码, 内容由developer.aliyun.com提供.

vue实现base64格式转换为图片

2024-05-08359
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：vue实现base64格式转换为图片

在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>


目录
相关文章
|
2天前
|
JavaScriptAPI
vue使用hook:声明周期来监听子组件的声明周期
本文介绍了如何在Vue中使用生命周期钩子来监听子组件的生命周期事件，包括在子组件内部监听和在父组件中监听子组件的生命周期钩子。
1600
|
2天前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定，包括在Vue 2中使用`value`和`input`事件，以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
362222
|
2天前
|
JavaScript
vue知识点
vue知识点
1244
|
2天前
|
存储JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求，以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌（cancelToken），并在vuex中存储这些取消令牌的引用。当进行路由跳转时，通过路由守卫清除这些请求，达到取消上一个页面请求的目的。
1222
|
7天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
4天前
|
JavaScript
vue异步渲染
vue异步渲染
|
8天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
8天前
|
JavaScript前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript
关于Vue非父子组件通信遇到的细节问题
本文讨论了Vue中非父子组件通信的一个细节问题，即当使用事件总线（$eventsBus）进行通信时，需要确保两个组件能够同时在页面上显示，否则可能无法正确触发和监听事件。作者通过组件A和B的例子说明了这一点，并指出解决方案是在一个共同的父组件C中监听事件。
911
关于Vue非父子组件通信遇到的细节问题
|
2天前
|
JSONJavaScript数据格式
Vue路由params、query参数丢失解决
该文章介绍了在Vue中使用`params`和`query`进行路由参数传递时，如何通过`sessionStorage`或`localStorage`解决参数丢失的问题。
922

热门文章

最新文章