小程序轉發圖片尺寸如何設置

本篇內容介紹了“小程序轉發圖片尺寸如何設置”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

1. 創建Canvas畫布

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

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

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

2. 下載網絡圖片

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

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

3. 裁剪圖片并導出

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

/* 裁剪封面，src為本地圖片路徑或臨時文件路徑，imgW為原圖寬度，imgH為原圖高度，cb為裁剪成功后的回調函數*/const clipImage = (src, imgW, imgH, cb) => { // ‘canvas’為前面創建的canvas標簽的canvas-id屬性值let ctx = wx.createCanvasContext('canvas');let canvasW = 640, canvasH = imgH; if (imgW / imgH > 5 / 4) { // 長寬比大于5:4canvasW = imgH * 5 / 4;} // 將圖片繪制到畫布ctx.drawImage(src, (imgW - canvasW) / 2, 0, canvasW, canvasH, 0, 0, canvasW, canvasH)// draw()必須要用到，并且需要在繪制成功后導出圖片ctx.draw(false, () => {setTimeout(() => {// 導出圖片wx.canvasToTempFilePath({width: canvasW,height: canvasH,destWidth: canvasW,destHeight: canvasH,canvasId: 'canvas',fileType: 'jpg',success: (res) => {// res.tempFilePath為導出的圖片路徑typeof cb == 'function' && cb(res.tempFilePath);}})}, 1000);})}

“小程序轉發圖片尺寸如何設置”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！