Vue3 canvas转png，base64编码的图片转file

T-小丑

已于 2024-03-08 15:08:27 修改

阅读量1k

点赞数 9

文章标签： javascript 前端开发语言

于 2024-03-01 09:52:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43932092/article/details/136387830

版权

本文介绍了如何在JavaScript中使用HTML5CanvasAPI创建图形，并展示如何将Canvas内容转换为Base64编码的图片和File对象，以便于上传或下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div>canvas</div>
    <canvas id="tutorial" width="300" height="300"></canvas>
    <br>
    <button @click="toimg">转图片</button>
    <button @click="tofile">转file</button>
  

</template>
 
<script setup>
    
   
    onMounted(()=>{
       

        var canvas = document.getElementById('tutorial');
        //获得 2d 上下文对象
        var ctx = canvas.getContext('2d');
        console.log('获得 2d 上下文对象')
        console.log(ctx)
        ctx.fillStyle = "rgb(200,0,0)";
        //绘制矩形
        ctx.fillRect (10, 10, 55, 50);
    
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);

       
    })
    
    //存base64编码的图片
    const base64img = ref('')
    
    //将canvas转换为png格式的图片，base64编码的图片
    const toimg = ()=>{
        var canvas = document.getElementById("tutorial");
        var image = canvas.toDataURL("image/png"); // 将canvas转换为png格式的图片，base64编码的图片
        console.log('将canvas转换为png格式的图片')
        console.log(image)
        base64img.value = image
    }
    
   
    //base64转换为file
    const tofile = ()=>{
        console.log(base64ToFile(base64img.value))
    }

    //将base64转换为文件
    const base64ToFile=(data)=> {
        // 将base64 的图片转换成file对象上传 atob将ascii码解析成binary数据
        let binary = atob(data.split(',')[1]);
        let mime = data.split(',')[0].match(/:(.*?);/)[1];
        let array = [];
        for (let i = 0; i < binary.length; i++) {
            array.push(binary.charCodeAt(i));
        }
        let fileData = new Blob([new Uint8Array(array)], {
            type: mime,
        });
        let file = new File([fileData], `${new Date().getTime()}.png`, {
            type: mime
        });
        return file;

    }
   
    
  
</script>
<style scoped>
canvas{
    border: 1px solid black;
}
</style>