? ? ? ? 最近有做一個關(guān)于自定義內(nèi)容之后生成圖片,用作分享使用.研究了一下,實現(xiàn)有兩種方案:1.服務(wù)端生成模板,通過傳給服務(wù)端數(shù)據(jù)返回圖片.這樣前端基本沒有任務(wù)量,只負責(zé)展示.2.前端自己處理,將所需數(shù)據(jù)畫入canvas中.我選擇了自己處理...
? ? ? ? 首先我們需要先寫一個canvas.如果還不了解canvas的朋友,給你們一個入口:
????????https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
????????注意,這個canvas不可隱藏.有圖片預(yù)覽需求的可以直接把他畫在頁面相應(yīng)位置,由于canvas是原生組件,不會被其他任何組件遮擋.如果想畫出效果,但又不想展示出來的,可以把canvas移除頁面顯示范圍就可以了.
? ? ? ? 如果不了解原生組件:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
? ? ? ? 寫入了canvas組件.之后便是繪制canvas.(示例內(nèi)容,大家可根據(jù))
????????let ctx = wx.createCanvasContext('shareCanvas');? ? //根據(jù)canvas-id創(chuàng)建canvas 的繪圖上下文?CanvasContext?對象
????? ? //填充背景????
? ? ????ctx.setFillStyle('#ffffff');
????? ? ctx.fillRect(0, 0, 750, 1334);
????????// ? ?畫一個邊框
????????ctx.setStrokeStyle('#cccccc')
????? ? ctx.strokeRect(24, 500, 700, 350)
? ? ? ? // ?畫入一段文字
????????ctx.setFontSize(26);
????? ? ctx.setFillStyle('#ff7e28');
? ? ????ctx.fillText('我是一段文字', 145, 580);
? ? ? ? // 畫入一張圖片(圖片url可以是網(wǎng)絡(luò)鏈接,也可以是本地路徑)
????????ctx.drawImage(imageUrl, 210, 60, 330, 330); ? ?
? ? ? ? // 將上面的內(nèi)容全部畫入canvas中
????????ctx.draw()
? ? ? ? 注意這個draw()方法是有callback的.所以,在進行下一步操作的時候,一定要寫在callback中.比如導(dǎo)出圖片.代碼如下:
? ? ? ?var that = this;
? ??????ctx.draw(true, ()=>{
? ? ? ? console.log('準備導(dǎo)出圖片');
? ? ? ? that.exportCanvasImage();// ?導(dǎo)出圖片
? ? ? });
? ? 關(guān)于canvas生成image,可以調(diào)用wx.canvasToTempFilePath方法.很簡單,填入一些參數(shù)即可.
? ? 下面要說的我覺得是實現(xiàn)功能的關(guān)鍵.在根據(jù)服務(wù)端數(shù)據(jù)生成圖片時,尤其是數(shù)據(jù)圖片,我們不可能在圖片沒有download的情況下將其畫入canvas,所以,一定要將其先下載到本地.才能畫入canvas.而且還有多張圖片需要下載的情況.所以我自己寫了一個方法來處理這些需要download的圖片文件,代碼如下:
// imageArr是imageUrl數(shù)組.callback是執(zhí)行結(jié)果的回調(diào)函數(shù).
locateImagePath:function(imageArr=[], callback) {
? ? let promiseList = imageArr.map((item) => {
? ? ? return new Promise(resolve => {
? ? ? ? wx.getImageInfo({
? ? ? ? ? src: item,
? ? ? ? ? success: (res) => {
? ? ? ? ? ? console.log('生成本地路徑成功!');
? ? ? ? ? ? resolve(res);
? ? ? ? ? },
? ? ? ? ? fail:(error) =>{
? ? ? ? ? ? wx.hideLoading();
? ? ? ? ? ? app.showToast('圖片保存失敗!');
? ? ? ? ? ? console.log('生成本地路徑失敗!');
? ? ? ? ? ? return;
? ? ? ? ? }
? ? ? ? });
? ? ? });
? ? });
? ? // ?當(dāng)數(shù)組內(nèi)所有圖片都下載到本地,返回result值
? ? const result = Promise.all(promiseList).then((res) => {
? ? ? console.log('結(jié)束');
? ? ? console.log(res);
? ? ? callback(res);
? ? }).catch((error) => {
? ? ? console.log(error);
? ? });
? },
? 可以在callback中進行圖片資源的繪制.
this.locateImagePath(imageArr,(res)=>{
? ? ? console.log('該畫畫啦');
? ? ? console.log(res);
? ? ? ctx.drawImage(res[0].path, 210, 60, 330, 330);
? ? ? ctx.draw(true, ()=>{
? ? ? ? console.log('準備導(dǎo)出圖片');
? ? ? ? that.exportCanvasImage();
? ? ? });
? ? })
這樣,就可以把網(wǎng)絡(luò)圖片畫入canvas中了.
在微信小程序,還要注意域名的設(shè)置.要把需要download的圖片域名都添加入小程序后臺的域名設(shè)置.downloadfile中.一個月只能修改5次.總結(jié)好了盡量一次添加成功.
