需求背景:用戶評論后實時生成一個圖文卡片,可保存至手機后分享給朋友,像豆瓣標記某本書后生成的卡片
思路之一是用canvas畫好圖文,后通過API:wx.canvasToTempFilePath(OBJECT)輸出為圖片,預覽該圖片,用戶可保存該圖片到手機,而后可分享給朋友;
一些問題:文字換行,html5 canvas可通過measureText測量文字寬度來實現換行點擊預覽,而小程序API沒有提供這個;
其他:
不知道能否直接用wxml寫好卡片,再將其轉化為圖片,似乎想多了...
看到WeZRender:微信小程序Canvas增強組件, 來源于ZRender:一個輕量級Canvas類庫,未確定是否能解決文字換行的問題
不知道這種需求,你們是怎么實現的;如果是用canvas,文字換行的問題是怎么解決的;是否還有其他比較重要的問題?
文字換行解決方案:
使用WeZRender繪圖,文字間加上"n"換行符,可以成功換行,根據這個,可以限制一行顯示固定字數比如20個,在畫文字前,先在該換行的位置出入"n";
按照上面這個思路,直接canvas畫圖的話,也可將文字分多段畫
其他的問題:
圖片以圓形顯示:暫不確定WeZRender可否用一個同樣大小的圓來裁切圖片,從而使得以圓形顯示
卡片圓角:同上
canvas輸出圖片模糊:使得輸出寬高為canvas寬高*設備像素比可解決,相關問題鏈接
問:微信小程序分享是在頁面里配置onShareAppMessage
Page({ onShareAppMessage: function () { return { title: '自定義轉發標題', path: '/page/user?id=123' } } })
但有些小程序會在頁面有分享按鈕,點擊按鈕主動分享,這個是怎么實現的呢?
免責聲明:本站所有文章和圖片均來自用戶分享和網絡收集,文章和圖片版權歸原作者及原出處所有,僅供學習與參考,請勿用于商業用途,如果損害了您的權利,請聯系網站客服處理。
工作日 8:30-12:00 14:30-18:00 周六及部分節假日提供值班服務
工作日 8:30-12:00 14:30-18:30