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

                }

            },

转载于:https://www.cnblogs.com/lanshengzhong/p/8416379.html