小程序canvas文本换行生成图片

Posted 2021-03-01 前端学习123321123

一、图片透明及旋转

let ctx = wx.createCanvasContext(‘shareImg‘)
ctx.drawImage(‘../../../‘ + res[0].path, 0, 0, w, h)
ctx.save()
ctx.globalAlpha = 0.2
ctx.rotate(-15*Math.PI/180)

二、字体加粗

let text = ‘这是加粗的文本‘
ctx.fillText(text, 194, 378 + 0.5)
ctx.fillText(text, 194 + 0.5, 378)
ctx.fillText(text, 194 , 378)

三、文本换行

this.canvasTextAutoLine(‘这是换行的文本‘,ctx,85,467,60,560)
/*
canvas文字换行
str:要绘制的字符串
ctx:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高，自己定义个值即可
canvasWidth:画布的宽度
*/
canvasTextAutoLine(str,ctx, initX, initY, lineHeight,canvasWidth) {
    const arrText = str.split(‘‘)//字符串分割为数组
    let currentText = ‘‘// 当前字符串及宽度
    let currentWidth
    for (let letter of arrText) {
        currentText += letter
        currentWidth = ctx.measureText(currentText).width
        if (currentWidth > canvasWidth) {
            ctx.fillText(currentText, initX, initY)
            currentText = ‘‘
            initY += lineHeight
        }
    }
    if (currentText) {
        ctx.fillText(currentText, initX, initY)
    }
},

四、生成图片

注意：

• 绘制本地图片直接写入相对路径即可：ctx.drawImage(‘../../images/xxx.png‘,x, y, w, h)。
• 如果图片来自网络，首先需要在小程序服务器域名配置downloadFile的合法域名，必须为https协议，不然真机上是绘制不出来的。
• 如果网络图片地址是异步请求过来的数据，需要先使用wx.downloadFile()的方式，把图片下载到本地，再把临时的本地路径使用drawImage()绘制:

wx.downloadFile({
    url: src,
    success: function (res) {
        if(res.tempFilePath) {
            ctx.drawImage(res.tempFilePath, x, y, w, h)
        }
    }
})
                        

• 如果有多张网络图片时，同样需要先等待所有的图片加载完，再去绘制。这里可以使用promise的方式来实现：

wx.showLoading({ title: ‘努力生成中...‘ })
//小程序本地路役图片
let promise1 = new Promise(function (resolve, reject) {
    wx.getImageInfo({
        src: ‘../../../images/bg1.png‘,
        success: function (res) {
            resolve(res)
        },
        fail: function (error) {
            reject(error)
        },
    })
});
//网络异步请求
let promise2 = new Promise(function (resolve, reject) {
    api.orderDetail().then(res => {
        if(res.code == 0) {
            resolve()
        }
    }).catch((error) => {
        reject(error)
    })
});
Promise.all([promise1,promise2]).then(result => {
    let ctx = wx.createCanvasContext(‘shareImg‘)
    ctx.drawImage(‘../../‘ + result[0].path, 0, 0, w, h)
    ctx.save()
    wx.downloadFile({
        url: result[1].pic,
        success: function (res) {
            console.log(res)
            if(res.tempFilePath) {
                ctx.drawImage(res.tempFilePath, 178, 790, 216, 216)

                ctx.stroke()
                //draw的第一个参数为false表示仅有一个画布
                //第二个参数一定要加定时器，不然会出现生成的图片黑白
                ctx.draw(false, setTimeout(() => {
                    wx.canvasToTempFilePath({
                        x: 0,
                        y: 0,
                        width: w,
                        height: h,
                        destWidth: w,
                        destHeight: h,
                        canvasId: ‘shareImg‘,
                        success: function (res) {
                            _this.setData({ "finishCreateCanvas": true })
                        },
                        fail: function (res) {
                            _this.createCanvasFail()
                         },
                        complete: function (res) {
                            wx.hideLoading()
                        }
                    })
                }, 500))}
            }
        },fail: function (error) {
            //如果有图片数据请求失败，在这里做进一步的处理
            _this.createCanvasFail()
        },
    })
}).catch((error) => {
    //如果有图片数据请求失败，在这里做进一步的处理
    _this.createCanvasFail()
})

五、生成图片
生成图片之前必须保证canvas已经绘制完成，对此在使用wx.canvasToTempFilePath()方法可以使用定时器的形式保存为临时图片路径，代码已经在上面有所展示。

//生产环境时 记得这里要加入获取相册授权的代码
wx.saveImageToPhotosAlbum({
    filePath: _this.data.prurl,
    success(res) {
        wx.showModal({
            content: ‘图片已保存到相册，赶紧晒一下吧~‘,
            showCancel: false,
            confirmText: ‘好哒‘,
            confirmColor: ‘#72B9C3‘,
            success: function (res) {
                if (res.confirm) {
                    console.log(‘用户点击确定‘);
                }
            }
        })
    }
})