這是我第二次畫海報蔗坯，完成后決定把整個流程寫下來，供大家一起學習，不對的地方也請大家熱心指教~
1.先給海報在頁面上規(guī)定好寬高
<!-- 畫布大小按需定制 -->
<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>
（如果有更好的方法，歡迎大家一起來討論）
調(diào)試的時候我沒有隱藏遗锣，因為可以直觀的看到效果圖進行修改完善
2.點擊“保存海報”時觸發(fā)canvas事件
<!--wxml文件-->
<div @tap="savePoster">保存海報</div>
<!--js文件-->
/*
* 保存海報
*/
savePoster() {
var that = this;
this.drawCanvas();//調(diào)用繪制函數(shù)
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({ //網(wǎng)絡(luò)圖片需要先下載到本地
url:'圖片地址',
success(res) {
// 只要服務(wù)器有響應(yīng)數(shù)據(jù)，就會把響應(yīng)內(nèi)容寫入文件并進入 success 回調(diào)精偿，業(yè)務(wù)需要自行判斷是否下載到了想要的內(nèi)容
if (res.statusCode === 200) {
const ctx = wx.createCanvasContext('springCanvas')
ctx.drawImage(res.tempFilePath, 0, 0, 328, 582);
ctx.draw()
wx.downloadFile({ //下載第二張網(wǎng)絡(luò)圖片
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) //設(shè)為true時弧圆，不會擦除之前繪制的內(nèi)容
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
// 生產(chǎn)環(huán)境時 記得這里要加入獲取相冊授權(quán)的代碼
// 可以通過 wx.getSetting 先查詢一下用戶是否授權(quán)了 "scope.writePhotosAlbum" 這個 scope
wx.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
// 用戶已經(jīng)同意小程序相冊功能赋兵，后續(xù)調(diào)用 wx.saveImageToPhotosAlbum 接口不會彈窗詢問
that.startSaveImage()
}
})
} else {
that.startSaveImage()
}
}
})
},
startSaveImage() {
let that = this
wx.saveImageToPhotosAlbum({
filePath: that.preurl,
success(res) {
}
})
},
OK，到這里搔预，海報已繪制完成并下載到相冊（包括網(wǎng)絡(luò)圖片的下載和繪制霹期，文字的繪制，矩形的繪制）拯田。
下一篇將會寫關(guān)于繪制海報時文字換行問題历造，請大家多多關(guān)注~
