小程序canvas文本换行生成图片
一、图片透明及旋转
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('用户点击确定');
}
}
})
}
})