这是我第二次画海报，完成后决定把整个流程写下来，供大家一起学习，不对的地方也请大家热心指教~
1.先给海报在页面上规定好宽高
<!-- 画布大小按需定制 -->
<canvas canvas-id="springCanvas" style="width:328px;height:582px"></canvas>
canvas-id一定要写，这就是海报要绘制的地方
如果不想看到绘制过程或效果，可以将canvas隐藏起来，我是这么写的
<!-- 画布大小按需定制 -->
<view style='width:0px;height:0px;overflow:hidden;'>
<canvas canvas-id="springCanvas" style="width:328px;height:582px"></canvas>
</view>
（如果有更好的方法，欢迎大家一起来讨论）
调试的时候我没有隐藏，因为可以直观的看到效果图进行修改完善
2.点击“保存海报”时触发canvas事件
<!--wxml文件-->
<div @tap="savePoster">保存海报</div>
<!--js文件-->
/*
* 保存海报
*/
savePoster() {
var that = this;
this.drawCanvas();//调用绘制函数
wx.showLoading({
title: '努力生成中...'
});
}
/**
* 绘制图片和文本
*
*/
drawCanvas(){
var that = this;
//得到背景图片
let promise1 = new Promise(function(resolve,reject){
wx.getImageInfo({
src:'图片地址',
success:function(res){
resolve(res);
},
fail:function(res){
reject(res);
}
})
})
let promise2 = new Promise(function(resolve,reject){
wx.getImageInfo({
src:'图片地址',
success:function(res){
resolve(res);
},
fail:function(res){
reject(res);
}
})
})
//成功得到图片信息后，开始绘图
Promise.all([promise1, promise2])
.then(res=>{
wx.downloadFile({ //网络图片需要先下载到本地
url:'图片地址',
success(res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
const ctx = wx.createCanvasContext('springCanvas')
ctx.drawImage(res.tempFilePath, 0, 0, 328, 582);
ctx.draw()
wx.downloadFile({ //下载第二张网络图片
url:'图片地址',
success(res){
if (res.statusCode === 200) {
ctx.drawImage(res.tempFilePath,11,44,305,25)
ctx.draw(true)
//开始绘制文字
ctx.setTextAlign('center') //居中
ctx.setFontSize(16) //字号
ctx.setFillStyle('rgba(141,23,0,1)') //字体颜色
ctx.fillText(that.renderData.orgName, 165, 61)
ctx.draw(true) //设为true时，不会擦除之前绘制的内容
ctx.setFillStyle('white')
ctx.fillRect(220, 480, 80, 80) //绘制白色矩形
ctx.draw(true,setTimeout(function(){
wx.canvasToTempFilePath({
x:0,
y:0,
width:328,
height:582,
destWidth: 328,
destHeight: 582,
canvasId:'springCanvas',
success:function(res){
console.log('res.tempFilePath'+res.tempFilePath);
that.preurl=res.tempFilePath, //该路径为生成海报图片的临时路径
wx.hideLoading()
that.saveToAlbum() //保存到相册
},
fail:function(res){
console.log(res)
}
})
},2000))
}
}
})
}
}
})
}).catch(function(error) {
console.log(error)
})
},
/**
* 保存到相册
*/
saveToAlbum: function() {
var that = this
// 生产环境时 记得这里要加入获取相册授权的代码
// 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
// 用户已经同意小程序相册功能，后续调用 wx.saveImageToPhotosAlbum 接口不会弹窗询问
that.startSaveImage()
}
})
} else {
that.startSaveImage()
}
}
})
},
startSaveImage() {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.preurl,
success(res) {
}
})
},
OK，到这里，海报已绘制完成并下载到相册（包括网络图片的下载和绘制，文字的绘制，矩形的绘制）。
下一篇将会写关于绘制海报时文字换行问题，请大家多多关注~
网友评论