使用canvas给图片添加自定义文字并导出

peixuan_HE

已于 2024-04-30 09:10:29 修改

阅读量523

点赞数 3

文章标签：前端 javascript html vue canva可画

于 2024-04-19 11:20:25 首次发布

本文链接：https://blog.csdn.net/peixuan_HE/article/details/137958278

版权

文章介绍了如何使用HTML5的CanvasAPI在网页中让用户自定义图片并添加文字，展示了如何加载图片、绘制文本并最终将生成的图片转化为Base64格式，同时提及了处理图片叠加问题的方法。

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

需求

   用户可选择相应图片自定义输入文字进行组合，生成自己想要的图片

涉及功能点：

   canvas

<template>
    <canvas id="myCanvas" width="100" height="100"></canvas>
</template>

<script>
export default{
    methods:{
        fn(){
            var canvas=document.getElementById('myCanvas')
            var ctx=canvas.getContext('2d')
            var img=new Image()
            var _this=this
            img.onload=function(){
              ctx.drawImage(img,0,0)
              ctx.font='18px Arial'
              ctx.fillStyle='black'
              ctx.fillText(_this.text,20,50)   // 填充用户填入的自定义文字
              _this.imgBase64=canvas.toDataURL('image/png',1)  //将生成图片转为base64编码，1为清晰度，范围：0～1，不传默认为0.92
        }
            img.src='data:image/png;base64,'+你的图片base64码
            canvas.width=img.width  
            canvas.height=img.height
            // 实操发现，如果重复选择各种图片，所有图片会在canvas上累加，影响观感，此时每次选择图片时重置canvas宽高会清空画布

           // 或清空画布还可  context.clearRect(0, 0, w, h);

        }
    }

}
</script>