Vue+canvas 实现自定义文字样式转图片，文字与图片进行合成（内蒙古民族大学实习项目）

         本项目是本人大四在内蒙古斡仑科技实习所做项目，使用Vue+canvas 实现自定义文字样式转图片，文字与图片进行合成，图片可下载为PNG格式,并且打包用宝塔面板部署到了腾讯云

项目展示网址：121.4.255.161:9494

        如果有关于此项目不懂问题可在评论下方留言或微信18018770039

项目模块：

<template>
    <div style="width:400px">
      <div>
        <h1>斡仑科技</h1>
        <hr>
      </div>
      <!-- <img :src="image" class="img" alt=""/> -->
      <canvas id="mycanvas" width='750' height='530' class="my-canvas"></canvas>
     

      <div>
        <input type="file" id="uploadFile" class="clip" accept="image/*" @change="chooseImg">
      </div>
        
        <div><span>请输入你要添加的文字</span></div>
        <input type="text" placeholder="请输入你要添加的文字" class="water-text" v-model="text" @change="conformText()">
        <!-- <input type="text" placeholder="请输入你要添加的文字dd" class="water-text2" v-model="text1"  @change="conformText1()"> -->

        <div><select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
      </option>
             </select>
             <span>------------选择字体大小： {{ selected }}</span></div>

             <div>
                <select v-model="selected2">
  <option v-for="option in options2" v-bind:value="option.value">
      {{ option.text }}
      </option>
             </select>
             <span>----------选择字体颜色： {{ selected2 }}</span>
             </div>
         
         <div class="aa">
           <img id="imgTextUrl" :src="imgTextUrl" width="200" >
           <!-- <img id="imgsrc" :src="imgsrc" width="200"> -->
         </div>
         
           
           
           <div class="conform" @click="drawPhoto()">@+++++++++++【合成图片】+++++++++++@</div>    
           
           
          

           <div  @click="downLoad()">@--------【下载】---------@</div>

            <div class="cun"> </div>
</div>

</template>
<script>
export default {
data() {
    return {
      image: "",
    //   nane:'张三',
    //   zhengshu:'3333333',
       imgsrc:"",
            imgTextUrl:"",
            imgUploadUrl:"",
            text:"  ",
            text1:""  ,
             selected: '50px',
    options: [
      { text: '小字体', value: '30px' },
      { text: '中字体', value: '60px' },
      { text: '大字体', value: '100px' }
    ] ,
    
    selected2: 'green',
    options2: [
      { text: '红色', value: 'red' },
      { text: '蓝色', value: 'blue' },
      { text: '黄色', value: 'yellow' },
      { text: '粉色', value: 'HotPink' },
      { text: '黑色', value: 'black' },
      { text: '橙色', value: 'DarkOrange' },
      { text: '灰色', value: 'DarkGray' },

    ] ,
    
    
    
    
    
    
    }
  },
  mounted() {
    //  this.drawPhoto();
  },
  methods: {
    
       chooseImg(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        let _this = this;
        reader.onload = function() {
          _this.imgsrc = reader.result;
        };
        _this.imgsrc = file;
      },
      //生成水印文字 canvas文字你可以设置为你喜欢的样式
      conformText() {
        var canvas = document.createElement('canvas') //准备空画布
        var ctx = canvas.getContext("2d")
         ctx.fillStyle =this.selected2;
        var fontSize = this.selected;
       var fontFamily = 'Georgia';
        ctx.font =fontSize+' '+fontFamily
        //  ctx.font = this.text1+"px"+"Georgia"
        // ctx.font = "90px Georgia" //canvas字体
        ctx.fillText(this.text, 10, 80)
        // var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
        // gradient.addColorStop("0", "magenta")
        // gradient.addColorStop("0.5", "blue")
        // gradient.addColorStop("1.0", "red")
       
        this.imgTextUrl = canvas.toDataURL("image/png")
      },
      conformText1(){
        console.log(this.text1)
      },
    drawPhoto() {
      let canvas = document.getElementById("mycanvas");//创建canvas
      let context = canvas.getContext("2d"); //创建画布
      let img = new Image(); //因为拿不到图片静态资源，所以创建图片标签
      img.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
      img.onload = () => {
        canvas.setAttribute("width",img.width)
        canvas.setAttribute("height",img.height)
        //绘制图片
        context.drawImage(img,0,0,img.width,img.height);
        context.fillStyle =this.selected2;
        var fontSize = this.selected;
       var fontFamily = 'Georgia';
        context.font =fontSize+' '+fontFamily
        //字体大小
        // context.font = "60px Arial";
        //字体文字，显示位置  图片上需要n个文字就写n个context.fillText(文字,上下,左右);
        context.fillText(this.text, 40, 80);
        // context.fillText(this.zhengshu, 2700, 1020);
        //合成图片
        this.image = canvas.toDataURL("image/jpg", 1.0);
        console.log(this.image)
        // console.log(this.image.src)


        let img1 = document.createElement("img");    //新创建一个img标签来存放加完水印的图片                                   
                            img1.width = 400;                                   
                            img1.height = 400;                                   
                            img1.src =this.image; 
                             var cun = document.querySelector('.cun'); 
                              cun.appendChild(img1)
                              console.log('sasa')
                               console.log(this.image)
      },
       img.src = this.imgsrc
      //加载图片
     
      
      },
    downLoad() {
        var b = document.createElement('a');
        b.href = this.image  //将画布内的信息导出为png图片数据
        b.download = '水印图片';  //设定下载名称 如果不设置a.download 浏览器会尝试打开这张图片 而图片会下载失败
        b.click(); //点击触发下载
      }

    },
  
  }






</script>
<style scoped>
  .my-canvas{
        position: fixed;
        top: -99999999999px;
        left: -99999999999px;
        z-index: -99999999999;
        opacity: 0;
   }
   .img{
		width: 100%;
		height: auto;
   }
.cun{
    margin-top: 100px;
}
.aa{
  margin-top: 50px;
}
</style>

路由部署：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
// import gg from '../components/gg/gg.vue'
// import dd from '../components/dd/dd.vue'
import cc from '../components/cc/cc.vue'




Vue.use(VueRouter)

const routes = [
 
  {path: '/' ,  redirect: 'cc'},
  // {
  //   path:'/gg', component: gg
  // },
  // {
  //   path:'/dd', component: dd
  // },
  {
    path:'/cc', component: cc
  }
 
 
]

const router = new VueRouter({
  routes
})

export default router

 项目实现

 

        最后完整的项目已经收工，四周的线上实习生活让我倍感充实，最后再次感谢斡仑科技可以给予我此次机会，大学的生活也快接近尾声，收起剑鞘的同时另外一场春招大战即将开始，我会秉持从斡仑科技学到的优良品质与熟练技术，向社会人生迈步前行！