前端生成分享海報相容H5和小程式

2022-07-02 10:48:14 字數 2846 閱讀 6197

### 移動端分享海報生成

最近做專案需求是生成商品分享海報,並且儲存到手機中要相容h5和小程式

與後端同學溝通後,海報在前端生成最省效能和有較好的互動體驗,先看做好的效果

實現方案是拿到後端返回的資料後,利用canvas畫布把各個資料拼在一起並且生成一張

onready(),

methods:,

fail: function(erros) 

});}}

這樣就暫時儲存到本地臨時檔案了

uni.downloadfile  需要注意的是

在各個小程式平台執行時,網路相關的 api 在使用前需要配置網域名稱白名單。在h5上是跨域的,使用者需要處理好跨域問題。

下來編寫canvas生成的方法

* 獲取分享海報

* @param array imgarr 海報素材 0 背景圖 1商品圖 2***

* @param string store_name 素材文字

* @param string price **

* @param string ot_price 原始**

* @param function successfn **函式

*/postercanvas: function(imgarr, store_name, price, ot_price, successfn) );

const ctx = uni.createcanvascontext('mycanvas');

ctx.clearrect(0, 0, 0, 0);

/*** 只能獲取合法網域名稱下的資訊,本地除錯無法獲取

* */

ctx.fillstyle = '#fff';

ctx.fillrect(0, 0, 750, 1150);

uni.getimageinfo(

ctx.settextalign('left');

ctx.setfontsize(36);

ctx.setfillstyle('#000');

// let contenthh = 36 * 1.5;

let contenthh = 36;

for (let m = 0; m 

}ctx.settextalign('left')

ctx.setfontsize(72);

ctx.setfillstyle('#da4f2a');

ctx.filltext('¥' + price, 40, 820 + contenthh);

ctx.settextalign('left')

ctx.setfontsize(36);

ctx.setfillstyle('#999');

ctx.filltext('¥' + ot_price, 50, 876 + contenthh);

var underline = function(ctx, text, x, y, size, color, thickness, offset) 

y += size + offset;

ctx.beginpath();

ctx.strokestyle = color;

ctx.linewidth = thickness;

ctx.moveto(x, y);

ctx.lineto(x + width, y);

ctx.stroke();

}underline(ctx, '¥' + ot_price, 55, 865, 36, '#999', 2, 0)

ctx.settextalign('left')

ctx.setfontsize(28);

ctx.setfillstyle('#999');

ctx.filltext('長按或掃瞄檢視', 490, 1030 + contenthh);

ctx.draw(true, function() 

})});

},fail: function(err) );}})

},首先建立乙個canvas 畫布

獲取背景圖資訊拿到寬和高再繪製商品並儲存

接下來繪製***並把座標放好並儲存

在處理文字換行問題並設定大小顏色和對其方式

在相對應的設定**和原價的顏色和大小還有座標

由於**還有條橫線,我在網上又搜下了橫線的做法直接看方法就行

最後生成資訊並且使用uni.canvastotempfilepath 方法把當前畫布指定區域的內容匯出生成指定大小的,並返回檔案路徑。

這樣我們就得到乙個.png的臨時檔案現在就剩最後一步把檔案渲染到元件裡了,從**函式就可以回去到

此方法用的比方比較多我把它寫到公共方法裡面並且繫結到vue原型上面方便我們後面使用

現在編寫方法呼叫

let imgarr = ['背景圖路徑',this.pic,this.code]

this.$util.postercanvas(imgarr,'標題','**','原價',function(tempfilepath))

}這樣就拿到生成好的的是乙個臨時檔案 現在把他放到頁面中展示就ok了

儲存功能h5可以長按儲存這裡只用處理小程式的就行

let that = this;

uni.getsetting(,

fail: function(res) 

});}

});} else ,

fail: function(res) 

});}

}});

},這樣前端生成海報就大功告成了,你學廢了嗎?

最後打一波廣告:

crmeb**乙個免費開源專案

管理後台使用vue+iview框架

開源不易,希望各位關注下,說不定你會有意外收穫!

uni用canvas繪製H5端的分享海報

花了一天多完成,幾個知識點 坑 的記錄 所以用的是wxqrcode.js,返回的是乙個base64,8是url的規範等級,否則長度超出後會報錯 this.qr wxqrcode.createqrcodeimg window.location.href,直接用繪圖方法就能根據base64畫出來 ctx...

小程式內h5頁面,完成分享

小程式內直聯h5的頁面 pages webview webview.js 該頁面為的容器,使用元件 需要bindmessage事件和postmessage方法 bindmessage 網頁向小程式 postmessage 時,會在特定時機 小程式後退 元件銷毀 分享 觸發並收到訊息。e.detail...

h5 複製功能實現 相容IOS和android

安卓實現方法 document.getelementbyid input select 選擇所要複製的文字節點 document.exexcommand copy 執行瀏覽器的copy命令實現複製 ios實現方法 1 window.getselection removeallranges 將頁面所有...