?現(xiàn)在的效果

希望的效果

?最主要的是下面的這個函數(shù)。把圖片轉成了5:4的臨時圖片

cutShareImg(doctorImg:string ){
      let that=this;
      return new Promise((resolve) => {
		wx.getImageInfo({
		  src: doctorImg,  // 這里填寫網(wǎng)絡圖片路徑 
		  success: (res) => {
			var data = res
			console.log(res)
			wx.createSelectorQuery()
			.select('#canvas') // 在 WXML 中填入的 id
			.fields({ node: true, size: true })
			.exec((res) => {
			   // Canvas 對象
			   console.log(res)
			  const canvas = res[0].node
			  // 渲染上下文
			  const ctx = canvas.getContext('2d')
			  let width = data.width/8;
			  let height = data.height/8;
			  let path = data.path;

			  // Canvas 畫布的實際繪制寬高
			  var widths = height*5/4
			  const dpr = this.getPixelRatio();
			  console.log('dpr',dpr)
			  var w = (widths-width)/2
			  canvas.width = widths * dpr
			  canvas.height = height * dpr
			  ctx.scale(dpr, dpr)
			  ctx.clearRect(0, 0, widths, height)
			  // 圖片對象
			  const image = canvas.createImage()
			  console.log(image)
			  image.onload = () => {
				// 將圖片繪制到 canvas 上
				ctx.drawImage(image, w, 0,width,height)
				wx.canvasToTempFilePath({
					canvas,
					success: res => {
						// 生成的圖片臨時文件路徑
						const tempFilePath = res.tempFilePath;
						resolve(tempFilePath)
					},
				  })
			  }
			  image.onerror = (err:any) => {
					console.log(err)
				}
			  image.src= path			 
			})
		  }
		});
       })
	  },

?頁面上。使用定位讓用戶看不到這個繪圖，但是實際上只是不出現(xiàn)在可視范圍內

<canvas id="canvas" type="2d" style="position: absolute; top: -1000px; left: -1000px;"></canvas>

然后調用函數(shù)把你的圖片換成這個臨時的圖片

this.setData({
    shareImg:this.cutShareImg(options.imgSrc)
})}

onShareAppMessage() {

return {
   title: '標題',
   imageUrl: this.data.shareimg,
   path: "" 
}

}文章來源地址http://www.zghlxwxcb.cn/news/detail-488505.html

到了這里，關于微信小程序分享的圖片被裁切了。怎么讓他不裁剪正常比例5:4顯示的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！