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