商城系統(tǒng) 注冊

小程序轉發(fā)圖片尺寸設置,對話框微信小程序圖片尺寸

2020-09-27|HiShop
導讀:我們在分享一個微信小程序到微信群時,會顯示一個封面圖 ,這個封面圖一般是由尺寸要求的,如果不符合尺寸要求,該如何設置呢?下面是這篇對話框微信小程序圖片尺寸。...

我們在分享一個微信小程序到微信群時,會顯示一個封面圖 ,這個封面圖一般是由尺寸要求的,如果不符合尺寸要求,該如何設置呢?下面是這篇對話框微信小程序圖片尺寸。

我們知道微信小程序的轉發(fā)時的封面圖片比例固定為5:4,具體內容詳見小程序開發(fā)文檔:

但是,在實際開發(fā)時我們有時需要將某張動態(tài)請求的網絡圖片作為轉發(fā)封面圖(比如文章封面),而這張圖片又往往不符合 5:4 的比例要求。這時,如果我們直接將這張圖片作為封面圖其實也是可以的,只不過將長寬比大于 5:4 作為轉發(fā)封面時,封面下可能會留有部分空白。

因此,為了更加美觀,我們必須將圖片按照 5:4 比例進行適當?shù)夭眉簦覍懕疚牡哪康囊舱侨绱恕?/p>

小程序轉發(fā)圖片尺寸設置,對話框微信小程序圖片尺寸

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

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


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

我們要用到的canvas當然不能直接在頁面中顯示,所以可以使用負定位值的方式將其隱藏。

小程序轉發(fā)圖片尺寸設置,對話框微信小程序圖片尺寸

2. 下載網絡圖片

我們可以使用wx.downloadFile()來下載網絡圖片,也可以使用wx.getImageInfo(),因為我們這里需要獲取到圖片的寬高,所以這里就要用到wx.getImageInfo()來進行圖片的下載。


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

3. 裁剪圖片并導出

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


  1. /* 裁剪封面,
  2. src為本地圖片路徑或臨時文件路徑,
  3. imgW為原圖寬度,
  4. imgH為原圖高度,
  5. cb為裁剪成功后的回調函數(shù)
  6. */
  7. const clipImage = (src, imgW, imgH, cb) => {
  8.  
  9. // ‘canvas’為前面創(chuàng)建的canvas標簽的canvas-id屬性值
  10. let ctx = wx.createCanvasContext('canvas');
  11. let canvasW = 640, canvasH = imgH;
  12.  
  13. if (imgW / imgH > 5 / 4) { // 長寬比大于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()必須要用到,并且需要在繪制成功后導出圖片
  20. ctx.draw(false, () => {
  21. setTimeout(() => {
  22. // 導出圖片
  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為導出的圖片路徑
  32. typeof cb == 'function' && cb(res.tempFilePath);
  33. }
  34. })
  35. }, 1000);
  36. })
  37. }

以上就是這篇小程序轉發(fā)圖片尺寸設置 ,需要更多小程序開發(fā)內容,可以查看本網站,謝謝。

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序請查看:小程序商店


電話咨詢 預約演示 0元開店