微信小程序使用canvas繪圖生成個(gè)性化海報(bào)
從2012年開始,微信那個(gè)時(shí)候用戶的積累的量已經(jīng)非常大了,推出公眾號(hào),當(dāng)然大屏智能手機(jī)在那個(gè)時(shí)候也流行,傳統(tǒng)的大眾媒體逐步消亡,像微信公眾號(hào)這樣的新媒體盛行。企業(yè)的廣告投入開始從電視等傳統(tǒng)媒體向基于圈層文化的新媒體精準(zhǔn)營(yíng)銷轉(zhuǎn)移,甚至很多企業(yè)尤其互聯(lián)網(wǎng)企業(yè)開始思考如何利用用戶的自傳播這種方式去宣傳企業(yè)、實(shí)現(xiàn)商業(yè)目標(biāo)。而用戶的自傳播很好的途徑就是生產(chǎn)個(gè)性化的海報(bào)。舉個(gè)最常見的例子,我第一次使用Keep是因?yàn)樵谂笥讶吹脚笥逊窒硭\(yùn)動(dòng)量的一個(gè)截圖,當(dāng)時(shí)在我看來(lái)非常酷,有心率脈搏呀、時(shí)速運(yùn)動(dòng)量啊、消耗的卡路里等,還有一個(gè)二維碼,然后我就點(diǎn)了下載了Keep,這整個(gè)獲客成本幾乎為0,秒秒鐘就多了一個(gè)用戶。而實(shí)現(xiàn)這一過(guò)程的技術(shù)手段就可以用canvas。所以,canvas的盛行,與企業(yè)的精準(zhǔn)營(yíng)銷和用戶的自傳播有很大的關(guān)系。
大家看第一張圖的話是在2017年末的時(shí)候,Qcon全球軟件開發(fā)大會(huì)預(yù)熱階段的海報(bào)。然后我們?yōu)槌绦騿T做了一個(gè)生成2018年關(guān)鍵字的一張海報(bào),文案都非常有趣啊。第二張的話是在2018年元旦的時(shí)候做的極客時(shí)間助手,這個(gè)小程序當(dāng)初主要是為程序員做的2018年新年簽。那面就是一些極客時(shí)間的專欄,包括用戶留言,你留言隨手可以生成一張海報(bào),可以轉(zhuǎn)發(fā)等等大概就是這樣。
基礎(chǔ)語(yǔ)法Canvas本質(zhì)是一個(gè)可以使用腳本(通常為JavaScript)來(lái)繪制圖形的 HTML 元素,默認(rèn)大小為300像素×150像素(寬×高,像素的單位是px),通過(guò)JavaScript上下文對(duì)象動(dòng)態(tài)創(chuàng)建圖像。比如,畫線、畫矩形、涂顏色甚至生成帶二維碼的海報(bào)。原理就是一筆一筆的畫,畫一條橫線,再畫一條橫線等等,就是不斷地創(chuàng)建路徑、繪制路徑,然后把這個(gè)路徑封閉起來(lái)可以涂色之類的,他的底層的封裝就是放到一個(gè)數(shù)組里形成一個(gè)路徑的數(shù)組,將這個(gè)數(shù)組傳到j(luò)s底層的一個(gè)方法,然后去繪制。
首先,你需要把這張圖片畫canvas上面,比如說(shuō)你畫你這個(gè)頭像就是正方形,就在(0,0)開始畫一個(gè)圖片。那么你在這個(gè)圖片的中心,作為原點(diǎn),然后你畫一個(gè)圓形。然后你再利用canvas語(yǔ)法畫一個(gè)圓弧,在這個(gè)圓弧路徑以外設(shè)置不可見以內(nèi)設(shè)置可見,這個(gè)時(shí)候就形成了一個(gè)圓形頭像。
<canvas id="canvas" width="300" height="300"></canvas> <script> const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') const img = new Image() img.onload = function() { circleImg(ctx, img, 100, 100, 50) } img.src="https://avatar-static.segmentfault.com/289/811/2898115528-58c35e9b79717_big64" function circleImg(ctx, img, x, y, r) { ctx.save() let d = 2 * r let cx = x + r let cy = y + r ctx.arc(cx, cy, r, 0, 2 * Math.PI) ctx.stroke(); ctx.clip() ctx.drawImage(img, x, y, d, d) ctx.restore() } // 微信小程序中的[canvas](https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html)與HTML5的canvas在語(yǔ)法有些區(qū)別,比如API就不一樣, // 另外小程序中的canvas因?yàn)槭窃M件的層級(jí)是最高的,所以頁(yè)面中的其他組件無(wú)論設(shè)置 z-index 為多少,都無(wú)法覆蓋原生組件 </script>二、常用的"生成海報(bào)"的方式
我們會(huì)經(jīng)常在朋友圈看到什么算命、性格分析、測(cè)算你的智商、情商等等這些東西,都是由用戶分享出一張圖片(海報(bào)),這個(gè)圖片就是用canvas做成的,上面畫了二維碼,二維碼是一個(gè)數(shù)組兩個(gè)或循環(huán)嵌套畫小黑點(diǎn)用戶識(shí)別這個(gè)二維碼之后就進(jìn)入他的程序,經(jīng)過(guò)程序跑出來(lái)的測(cè)試結(jié)果啊什么的,點(diǎn)保存的時(shí)候,就會(huì)生成一張個(gè)性海報(bào)明白。怎么生成這種個(gè)性化海報(bào)呢?
2.1 字符串模板此處應(yīng)有案例
主要實(shí)現(xiàn):與服務(wù)端約定好數(shù)據(jù)格式-->前端做好模板-->服務(wù)端用第三方工具渲染返回到客戶端img
首先與服務(wù)端約定好數(shù)據(jù)格式,比如關(guān)鍵字是什么、頭像URL、昵稱等等,把所有放數(shù)據(jù)格式的地方用{{{}}}嵌套,告訴后端位置;然后,將前端模擬數(shù)據(jù)摳去,比如user.tags,把這一段html的字符串模板給到服務(wù)端,最后服務(wù)端拿到數(shù)據(jù)通過(guò)html2canvas這樣的第三方工具把圖片渲染返回給客戶端展示,讓用戶可以長(zhǎng)按這張圖片保存到手機(jī)相冊(cè)。這是比較傳統(tǒng)的方式早些年基本上都是通過(guò)這種方式。
有什么弊端呢?
一是第三方工具維護(hù)不及時(shí)、不支持flex布局、ES6等語(yǔ)法,二是調(diào)試不方便,三是高并發(fā)的時(shí)候會(huì)出問(wèn)題,特別是生成的是高清無(wú)碼的海報(bào)的時(shí)候
案例: '極客時(shí)間小助手'小程序
主要實(shí)現(xiàn):前端直接通過(guò)canvas生成海報(bào)
搖晃手機(jī)抽取新年簽跳到第一個(gè)頁(yè)面,需要繪制頭像、關(guān)鍵字以及保存按鈕,黃色的保存按鈕其實(shí)就是呃一張透明的png圖片,把它畫上去。那在這個(gè)button上面兒需要固定一個(gè)寬高和它差不多大小的一個(gè)空的、透明的div,在這個(gè)div上加點(diǎn)擊事件,這個(gè)事件就是調(diào)第二張要保存的那個(gè)canvas。第二張這個(gè)是沒(méi)有保存按鈕的但有二維碼。帶二維碼的這張canvas放哪里呢?一種方案是定位,給一個(gè)特別大的top或left,讓它不顯示在屏幕里邊;另一個(gè)方案是層級(jí),預(yù)覽的這張canvas在真正要保存canvas圖片之上,但是會(huì)有問(wèn)題。手機(jī)瀏覽器版本低的話,定了層級(jí)不管用,一些安卓手機(jī)也會(huì)有問(wèn)題,有時(shí)候會(huì)浮上來(lái)沒(méi)被蓋住。
當(dāng)然,如果要實(shí)現(xiàn)保存高清圖的話,還是需要處理的,那就是放大,不過(guò)這個(gè)是笨方法。最優(yōu)的方法是拆解這張圖像,確保導(dǎo)出的canvas是最高清的,而且對(duì)用戶來(lái)說(shuō)也是最省流量的。
解析:進(jìn)到首頁(yè)其實(shí)關(guān)鍵字在本地就隨機(jī)取完了,在首頁(yè)index.js中的onShow方法中就通過(guò)wx.getStorageSync緩存了要畫的元素,比如關(guān)鍵字(這里是圖片)、關(guān)鍵字解析語(yǔ)(也是圖片,畢竟微信小程序的canvas不支持字體)等等。搖一搖觸發(fā)重力感應(yīng)事件wx.onAccelerometerChange監(jiān)聽里面的事件,獲取用戶授權(quán)拿到頭像并跳轉(zhuǎn)到poster頁(yè)面。直接就開始畫兩張圖片,一張有二維碼的(shakepage1),一張有button的(shakepage2),這里二維碼是'死碼',button也是在圖片的基礎(chǔ)上覆蓋一個(gè)view,畫完之后調(diào)canvasToTempFilePath保導(dǎo)出那張帶碼的,此時(shí)帶碼的這張通過(guò)css設(shè)置visibility: hidden隱藏起來(lái)。點(diǎn)擊按鈕觸發(fā)saveImageToPhotosAlbum將導(dǎo)出的這張 圖片保存到手機(jī)相冊(cè),這里需要授權(quán)相應(yīng)的要做一些處理,比如用戶拒絕授權(quán)之后再次點(diǎn)擊需要 wx.showModal再次請(qǐng)用戶授權(quán)?;敬a如下:(詳細(xì)源碼))
wx.canvasToTempFilePath({ x: 0, y: 0, width: this.data.screenWidth, height: this.data.screenHeight, destWidth: this.data.screenWidth * this.data.pixelRatio, // pixelRatio為設(shè)備的像素比 destHeight: this.data.screenHeight * this.data.pixelRatio, canvasId: "canvasid", success: function(e) { console.log(e) this.setData({ bjtempFilePath: e.tempFilePath // 拿到要保存的圖片路徑 }, function() {}); }, fail: function(e) { console.log(e); } })
onUserSaveImageRight: function () { console.log("-click-"); var _this = this; if (!wx.saveImageToPhotosAlbum) return wx.showModal({ title: "提示", content: "當(dāng)前微信版本過(guò)低,無(wú)法使用該功能,請(qǐng)升級(jí)到最新微信版本后重試。" }), void console.log("version low"); wx.getSetting({ success: function (res) { res.authSetting["scope.writePhotosAlbum"] ? (console.log("1-已經(jīng)授權(quán)《保存圖片》權(quán)限"), _this.saveimgfn()) : wx.authorize({ scope: "scope.writePhotosAlbum", success: function () { console.log("用戶對(duì)相冊(cè)-授權(quán)成功"), _this.saveimgfn(); }, fail: function () { wx.showModal({ title: "提示", content: "請(qǐng)您授權(quán)保存到系統(tǒng)相冊(cè)", showCancel: !1, success: function (res) { res.confirm && wx.openSetting({ success: function (res) { res.authSetting["scope.writePhotosAlbum"] ? setTimeout(function () { _this.saveimgfn(); }, 500) : wx.showModal({ title: "提示", content: "您未授權(quán),無(wú)法將海報(bào)保存到相冊(cè),你可以截屏得到海報(bào),或者再次點(diǎn)擊'保存海報(bào)'按鈕并授權(quán)", showCancel: !1 }); } }); } }); } }); } }); }, saveimgfn: function () { var filePath = this.data.bjtempFilePath; console.log(filePath), filePath ? wx.saveImageToPhotosAlbum({ filePath: filePath, success: function (res) { wx.showToast({ title: "保存成功", icon: "success", duration: 1500 }); }, fail: function () { wx.showToast({ title: "保存失敗", icon: "fail", duration: 1500 }); } }) : this.saveImage()三、極客時(shí)間小程序-生成各種海報(bào)的解決方案微信小程序canvas與HTM5的canvas對(duì)比
- 微信小程序canvas中層級(jí)z-index失效,小程序中canvas擁有最高級(jí),無(wú)法二次設(shè)置;
- 微信小程序canvas不支持字體功能,特殊字體只能用圖片代替;
- 微信小程序canvas不支持繪制在線圖片,需要下載再繪制(安全域名的鍋)
- 微信小程序canvas可以實(shí)現(xiàn)不同尺寸屏幕自適應(yīng)
var rpx; //獲取屏幕寬度,獲取自適應(yīng)單位 wx.getSystemInfo({ success: function(res) { rpx = res.windowWidth/750 }, }) // 在繪制方法中將參數(shù)乘以相對(duì)單位即可實(shí)現(xiàn)自適應(yīng) const s = wx.createCanvasContext("canvas") s.drawImage(Url, 0, 0, 265 * rpx, 262.5 * rpx)如何導(dǎo)出高清海報(bào)、如何封裝;
wx.canvasToTempFilePath({ canvasId: 'image-save', x: 0, y: 0, success: res => { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: () => { this.setData({saving: false}) utils.success('保存成功') setTimeout(() => {wx.navigateBack()}, 500) }, fail: err => { this.setData({saving: false}) wx.getSetting({ success: res => { if(!res.authSetting || !res.authSetting['scrop.writePhotoAlbum']){ wx.openSetting() } } }) } }) } })
第二部分:如何開通一個(gè)小商店