vue怎么使用Canvas在畫布上添加圖片

今天小編給大家分享一下vue怎么使用Canvas在畫布上添加圖片的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

使用Canvas在畫布上添加圖片

首先在template 里面創建一個dom

<div >
    <img ref="conf0" src="../../assets/image/tx.jpg">
</div>

然后畫圖代碼 這樣寫

// 獲取Canvas 畫圖
let myCanvas = this.$refs.myCanvas
var ctx = myCanvas.getContext('2d')
 
// 在Canvas畫布 添加圖片
var img = this.$refs.conf0
img.onload = () => {
  ctx.drawImage(img, 0, 0)
}

使用canvas在圖片上加上文字

<template>
  <div>
    <img src=""
         alt=""
         id="newimage"
         >
    <canvas id="canvas"
            width="278"
            height="298">
    </canvas>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.newImage('123#')
  },
  methods: {
    newImage (text) {
      // 生成圖片
      var imageBox = document.getElementById("newimage")
      var canvas = document.getElementById("canvas")
      var cxt = canvas.getContext("2d")
      var img = new Image()
      img.src = require('@/assets/louceng.png')
      // 圖片加載完成，才可處理
      img.onload = () => {
        // 畫圖(這里畫布與圖片等寬高)
        cxt.drawImage(img, 0, 0)
        // 設置字體大小
        cxt.font = "36px Microsoft YaHei"
        // 更改字號后，必須重置對齊方式，否則居中麻煩。設置文本的垂直對齊方式
        cxt.textBaseline = 'middle'
        cxt.textAlign = 'center'
        // 距離左邊的位置
        var left = canvas.width / 2
        // 距離上邊的位置 (圖片高-文字距離圖片底部的距離)
        var top = canvas.height * 0.14
        // 文字顏色
        cxt.fillStyle = "#ffffff"
        // 文字在畫布的位置
        cxt.fillText(text, left, top)
        imageBox.src = canvas.toDataURL("image/jpg")
        // this.flag = 1
      }
    },
  }
}
</script>

以上就是“vue怎么使用Canvas在畫布上添加圖片”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。