canvas在圖片上生成文字

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/img/activity/1.jpg')

                // 圖片加載完成，才可處理

                img.onload = () => {

                    // 畫圖(這里畫布與圖片等寬高)

                    cxt.drawImage(img, 0, 0)

                    // 設置字體大小

                    cxt.font = "28px Microsoft YaHei"

                    // 更改字號后，必須重置對齊方式，否則居中麻煩。設置文本的垂直對齊方式

                    cxt.textBaseline = 'middle'

                    cxt.textAlign = 'center'

                    // 距離左邊的位置

                    var left = canvas.width / 2

                    // 距離上邊的位置 (圖片高-文字距離圖片底部的距離)

                    var top = canvas.height - 328

                    // 文字顏色

                    cxt.fillStyle = "#000"

                    // 文字在畫布的位置

                    cxt.fillText(text, left, top)

                    imageBox.src = canvas.toDataURL("image/jpg")

                    this.flag = 1

                }

            },