小程序轉(zhuǎn)發(fā)圖片尺寸設(shè)置,對(duì)話框微信小程序圖片尺寸

我們?cè)诜窒硪粋€(gè)微信小程序到微信群時(shí)，會(huì)顯示一個(gè)封面圖 ，這個(gè)封面圖一般是由尺寸要求的，如果不符合尺寸要求，該如何設(shè)置呢？下面是這篇對(duì)話框微信小程序圖片尺寸。

我們知道微信小程序的轉(zhuǎn)發(fā)時(shí)的封面圖片比例固定為5:4，具體內(nèi)容詳見小程序開發(fā)文檔：

但是，在實(shí)際開發(fā)時(shí)我們有時(shí)需要將某張動(dòng)態(tài)請(qǐng)求的網(wǎng)絡(luò)圖片作為轉(zhuǎn)發(fā)封面圖（比如文章封面），而這張圖片又往往不符合 5:4 的比例要求。這時(shí)，如果我們直接將這張圖片作為封面圖其實(shí)也是可以的，只不過將長(zhǎng)寬比大于 5:4 作為轉(zhuǎn)發(fā)封面時(shí)，封面下可能會(huì)留有部分空白。

因此，為了更加美觀，我們必須將圖片按照 5:4 比例進(jìn)行適當(dāng)?shù)夭眉?，而我寫本文的目的也正是如此?/p>

1. 創(chuàng)建Canvas畫布

前端要裁剪圖片，我們首先就要想到用Canvas，寫H5如此，微信小程序當(dāng)然也是如此。

1. <canvas style="position: absolute; top: -1000px; left: -1000px; width: 640px; height: 640px; background: #000" canvas-id="canvas"></canvas>

我們要用到的canvas當(dāng)然不能直接在頁面中顯示，所以可以使用負(fù)定位值的方式將其隱藏。

我們可以使用wx.downloadFile()來下載網(wǎng)絡(luò)圖片，也可以使用wx.getImageInfo()，因?yàn)槲覀冞@里需要獲取到圖片的寬高，所以這里就要用到wx.getImageInfo()來進(jìn)行圖片的下載。

1. wx.getImageInfo({
2. src: "", // 這里填寫網(wǎng)絡(luò)圖片路徑
3. success: (res) => {
4. // 這個(gè)是我封裝的裁剪圖片方法（下面將會(huì)說到）
5. clipImage(res.path, res.width, res.height, (img) => {
6. console.log(img); // img為最終裁剪后生成的圖片路徑，我們可以用來做為轉(zhuǎn)發(fā)封面圖
7. });
8. }
9. });

3. 裁剪圖片并導(dǎo)出

以下是我封裝的專門用于裁剪圖片比例大于 5:4 的圖片，裁剪方式是截取圖片中間部分（當(dāng)然你也可以試著寫下裁剪小于 5:4 的圖片）：

1. /* 裁剪封面，
2. src為本地圖片路徑或臨時(shí)文件路徑，
3. imgW為原圖寬度，
4. imgH為原圖高度，
5. cb為裁剪成功后的回調(diào)函數(shù)
6. */
7. const clipImage = (src, imgW, imgH, cb) => {
8.  
9. // ‘canvas’為前面創(chuàng)建的canvas標(biāo)簽的canvas-id屬性值
10. let ctx = wx.createCanvasContext('canvas');
11. let canvasW = 640, canvasH = imgH;
12.  
13. if (imgW / imgH > 5 / 4) { // 長(zhǎng)寬比大于5:4
14. canvasW = imgH * 5 / 4;
15. }
16.  
17. // 將圖片繪制到畫布
18. ctx.drawImage(src, (imgW - canvasW) / 2, 0, canvasW, canvasH, 0, 0, canvasW, canvasH)
19. // draw()必須要用到，并且需要在繪制成功后導(dǎo)出圖片
20. ctx.draw(false, () => {
21. setTimeout(() => {
22. // 導(dǎo)出圖片
23. wx.canvasToTempFilePath({
24. width: canvasW,
25. height: canvasH,
26. destWidth: canvasW,
27. destHeight: canvasH,
28. canvasId: 'canvas',
29. fileType: 'jpg',
30. success: (res) => {
31. // res.tempFilePath為導(dǎo)出的圖片路徑
32. typeof cb == 'function' && cb(res.tempFilePath);
33. }
34. })
35. }, 1000);
36. })
37. }