vue项目base64字符串转图片的实现代码
时间: 2023-05-10 21:01:44 浏览: 198
Vue项目中实现将Base64字符串转换为图片的代码如下:
首先,需要引入一个图片处理的库,如:UPNG.js。
在Vue组件中,可以使用以下代码将Base64字符串转为图片。
```
<script>
import UPNG from 'upng-js';
export default {
name: 'ConvertBase64ToImage',
data() {
return {
base64Str: '',
imageSrc: '',
};
},
methods: {
convertBase64ToImage() {
const base64Image = this.base64Str.split(',')[1];
const byteCharacters = atob(base64Image);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const decodedImage = UPNG.decode(byteArray);
const imageArrayBuffer = UPNG.toRGBA8(decodedImage)[0];
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = decodedImage.width;
canvas.height = decodedImage.height;
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for (let i = 0; i < imageData.data.length; i += 4) {
imageData.data[i] = imageArrayBuffer[i];
imageData.data[i + 1] = imageArrayBuffer[i + 1];
imageData.data[i + 2] = imageArrayBuffer[i + 2];
imageData.data[i + 3] = imageArrayBuffer[i + 3];
}
ctx.putImageData(imageData, 0, 0);
this.imageSrc = canvas.toDataURL('image/png');
},
},
};
</script>
```
在模板中,通过v-model绑定base64Str,然后点击按钮调用convertBase64ToImage方法,最后用image标签显示图片。
```
<template>
<div>
<textarea v-model="base64Str"></textarea>
<button @click="convertBase64ToImage">转换</button>
<div>
<img :src="imageSrc" v-if="imageSrc" />
</div>
</div>
</template>
```
上述代码会调用UPNG解码base64字符串中的图像数据,并将其转换为RGBA8格式的像素数组。然后,将像素数组设置为图像数据,并将其绘制到画布上。最后,将画布转为base64格式的DataURL。