找了很多,但是都不太好用,打算自己总结一个保姆级教学,无需动脑,电脑有电就能实现
在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>