vue:canvas 绘制图片合成文字

最新推荐文章于 2024-07-23 20:12:16 发布

fankse

最新推荐文章于 2024-07-23 20:12:16 发布

阅读量2.1k

点赞数

分类专栏： 2020-03

本文链接：https://blog.csdn.net/fankse/article/details/105105300

版权

2020-03 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<template>
  <div>
      <img :src="image" alt="" style="width:400px;height:300px">
  </div>
</template>
<script>
export default {
  data(){
      return{
          image:'',

      }
  },
  methods:{
     drawPhoto(){
         let canvas=document.createElement("canvas");    //创建canvas
         let context=canvas.getContext('2d');        //创建画布
        let img=new Image();               //因为拿不到图片静态资源，所以创建图片标签
        img.setAttribute("crossOrigin",'anonymous');       //解决图片跨域问题,也要放到赋值前，否贼大部分浏览器会报错
        img.src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1925436222,738093984&fm=111&gp=0.jpg"
        //加载图片
        img.onload=()=>{
            //绘制图片
            context.drawImage(img,0,0,365,266);
            //字体大小
            context.font="12px";
            //字体填充颜色
            context.fillStyle="black";
            //字体文字，显示位置
            context.fillText('李晓燕',80,100);
            //合成图片
            this.image=canvas.toDataURL('image/png',0.7);      
    }

     }
  },
  mounted(){
      this.drawPhoto()
  }
}
</script>
<style>

</style>

效果图：
在这里插入图片描述