這一章節(jié)呢 就講下如何生成朋友圈海報(bào)混巧。對(duì)于這類的需求枪向，最近是賊多。因?yàn)樾〕绦虮緛?lái)就是即用即走的咧党，如何能高效快速的拉新秘蛔，以及留住用戶呢？emmmm凿傅。拉新嘛當(dāng)然得往票圈看齊缠犀，留存就得看你的產(chǎn)品里是否有吸引人的地方。
如何高效的讓其他用戶知道你的小程序產(chǎn)品聪舒，如何推廣你的小程序辨液？首先放幾張圖：
眾所周知呢，小程序是不能分享到票圈的箱残，所以我們就有了生成海報(bào)的概念滔迈，那么如何去操作生成海報(bào)呢止吁？
使用canvas畫圖
小程序提供了幾個(gè)相關(guān)的畫圖api 點(diǎn)這里
第一步操作：
首先我們需要在頁(yè)面上創(chuàng)建一個(gè)canvas，然后因?yàn)閏anvas 是系統(tǒng)組件它的層級(jí)最高燎悍，所以會(huì)導(dǎo)致一直顯示在頁(yè)面上敬惦，如果你需要查看效果圖，那么可以暫時(shí)不理谈山，最后實(shí)現(xiàn)的時(shí)候我們需要給他一個(gè)樣式`position: absolute; top: -10000rpx;`俄删。讓它定位到頁(yè)面可視區(qū)域之外，不能讓用戶查看到它奏路。
<canvas canvas-id="mycanvas" />
第二步操作：
js里需要把頁(yè)面背景圖畴椰、小程序碼圖 以及用戶頭像等圖片 使用
wx.getImageInfo({
src: ‘xxx.png‘,
success: (res) => { },
fail: (err)=>{
})
把cdn地址的圖片 轉(zhuǎn)成微信本地圖片，不然生成不了海報(bào)鸽粉。這個(gè)API有較多的轉(zhuǎn)換失敗的情況斜脂，現(xiàn)在我們小程序后臺(tái)報(bào)錯(cuò)基本都是該問題。所以需要在fail回調(diào)里做重試操作触机。
第三步操作：
畫圖.這里是大多數(shù)開發(fā)者比較煩的地方帚戳，頁(yè)面內(nèi)的所有元素需要組裝到一起。所以需要布局樣式儡首。
然后canvas的樣式是使用坐標(biāo)軸來(lái)玩的片任，所以需要根據(jù)x和y軸來(lái)調(diào)整樣式。且位置單位為px椒舵。接下來(lái)貼源碼吧
//將小程序碼繪制到固定位置
setQrcode(context) {
let path = this.data.qtsheXcxCode //小程序碼
context.drawImage(path, 75, 450, 75, 75)
},
//將昵稱繪制到canvas的固定位置
setName(context) {
if (this.data.userName.length >= 8) {
var title = this.data.userName.substring(0, 7) + '...'
} else {
var title = this.data.userName
}
context.setFontSize(14)
context.fillText(title, 98, 330)
},
//繪制用戶頭像
setAvatarUrl(context) {
let cx = 30 + 25
let cy = 320 + 25
context.arc(cx, cy, 25, 0, 2 * Math.PI)
context.clip()
let path = this.data.userHeadUrl
context.drawImage(path, 30, 320, 52, 52)
},
//將canvas轉(zhuǎn)換為圖片保存到本地蚂踊，然后將圖片路徑傳給image圖片的src
createNewImg() {
let context = wx.createCanvasContext('mycanvas')
let path = this.data.qtsheBackground
let that = this
context.drawImage(path, 0, 0, 375, 667) //以iPhone 6尺寸大小為標(biāo)準(zhǔn)繪制圖片
that.setQrcode(context)
that.setName(context)
that.setAvatarUrl(context)
//繪制圖片
context.draw()
context.save()
//將生成好的圖片保存到本地，需要延遲一會(huì)笔宿，繪制期間耗時(shí)
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
wx.hideLoading()
that.setData({
shareImagePath: res.tempFilePath
})
},
fail: function(res) {
console.log(res.errMsg)
}
}, this)
}, 2000)
},
注意一點(diǎn)的是保存圖片時(shí)需要延遲犁钟，這是老版的寫法，沒有啥問題泼橘，新版寫法可以通過draw回調(diào)畫圖成功后調(diào)用保存圖片的api wx.canvasToTempFilePath涝动。這個(gè)時(shí)候就不需要寫延時(shí)保存圖片。
savePhoto() {
var that = this
wx.showLoading({
title: '正在保存...',
mask: true
})
setTimeout(() => {
wx.saveImageToPhotosAlbum({
filePath: that.data.shareImagePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
that.setData({
isPhotoModel: false,
isCanvas: false
})
}, 300)
},
fail() {
wx.showToast({
title: '保存失敗炬灭，請(qǐng)刷新頁(yè)面重試',
icon: 'none'
})
setTimeout(() => {
wx.hideLoading()
that.setData({
isPhotoModel: false,
isCanvas: false
})
}, 300)
}
})
}, 2500)
}
然后再說一個(gè)canvas里繪制圓角頭像的方法：
ctx: context, img:圖片路徑醋粟，x:圓的中心的x坐標(biāo)，y: 圓的中心的y坐標(biāo)重归，r:圓的半徑
circleImg(ctx, img, x, y, r) {
ctx.save();
var d =2 * r;
var cx = x + r;
var cy = y + r;
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, x, y, d, d);
ctx.restore();
}
至此米愿，我們的海報(bào)就畫好了，并且保存圖片的步驟也完成了鼻吮。大家可以去試試育苟，充分利用好海報(bào)的便利，遵守微信規(guī)范椎木，別誘導(dǎo)分享被封啦违柏。
結(jié)語(yǔ)：
第三章就說到這里了博烂，這里介紹了小程序的海報(bào)的生成過程，下一章節(jié)將會(huì)講到小程序的營(yíng)銷組件老虎機(jī)和翻牌組件漱竖，以及其他相關(guān)功能組件具體可以在微信搜一搜 搜索兼職 然后通過服務(wù)直達(dá)區(qū)找到 《青團(tuán)社兼職實(shí)習(xí)》禽篱，有什么問題或意見可聯(lián)系QQ8662054指出。
青團(tuán)社招聘：
招聘崗位：高級(jí)前端開發(fā)工程師P5及以上
坐標(biāo)杭州市余杭區(qū)文一西路1380號(hào)金之源大廈11層
簡(jiǎn)歷投遞到：hr@qtshe.com || haochen@qtshe.com
職位描述：
1馍惹、建設(shè)工具躺率、提煉組件、抽象框架万矾，促進(jìn)前端工程化肥照、服務(wù)化，持續(xù)提升研發(fā)效率勤众，保障線上產(chǎn)品質(zhì)量
2、構(gòu)建H5/PC應(yīng)用基礎(chǔ)設(shè)施鲤脏，主導(dǎo)建設(shè)前端各種發(fā)布/監(jiān)控等平臺(tái)们颜，指導(dǎo)落實(shí)解決方案
3、持續(xù)優(yōu)化前端頁(yè)面性能猎醇，維護(hù)前端代碼規(guī)范窥突，鉆研各種前沿技術(shù)和創(chuàng)新交互，增強(qiáng)用戶體驗(yàn)硫嘶、開拓前端能力邊界
