vue图片转bg64函数封装

Vue.js 中，将图片转换为 base64 字符串通常是为了在前端处理图片资源，特别是在需要上传到服务器或显示在 canvas 元素上时。你可以创建一个自定义的方法，比如 `convertImageToBase64`，用于这个目的。以下是一个简单的封装示例：

export function convertImageToBase64(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = url;
        
        img.onload = () => {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            
            // 将 canvas 转换成 base64
            let dataURL;
            try {
                dataURL = canvas.toDataURL('image/jpeg'); // 或者 'image/png', 根据需要调整格式
                resolve(dataURL);
            } catch (error) {
                reject(error);
            }
        };
        
        img.onerror = reject;
    });
}

然后在你的 Vue 组件中，你可以这样使用这个方法：

<template>
    <button @click="uploadImage">上传图片</button>
</template>

<script>
import { convertImageToBase64 } from './utils'; // 假设你在 utils 文件夹下

export default {
    methods: {
        uploadImage() {
            convertImageToBase64('your-image-url')
                .then(base64String => {
                    console.log('成功:', base64String);
                    // 这里可以将 base64 用于上传或者设置背景等操作
                })
                .catch(error => {
                    console.error('失败:', error);
                });
        },
    },
};
</script>