小程序解决图片分享裁剪54问题
目录
小程序解决图片分享裁剪5:4问题
1、解决小程序中分享默认比率5:4导致图片被裁剪;
为保持图片完整性使用下列方法:
在获取完图片后调用 function cutshareImf(url){} url:为需要处理的图片地址;
wx.js
//传入图片地址
cutShareImg(doctorImg){
let that=this;
wx.getImageInfo({
src: doctorImg, // 这里填写网络图片路径
success: (res) => {
var data = res
console.log(res)
wx.createSelectorQuery()
.select('#myCanvas') // 在 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, path, height} = data
// Canvas 画布的实际绘制宽高
var widths = height*5/4
const dpr = wx.getWindowInfo().pixelRatio
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)
wx.canvasToTempFilePath({
canvas,
success: res => {
// 生成的图片临时文件路径
const tempFilePath = res.tempFilePath
that.setData({shareimg: tempFilePath})
},
})
}
image.onerror = (err) => {
console.log(err)
}
image.src= path
// 生成图片
})
}
});
},
video.wxml
<canvas style="position: absolute; top: -1000px; left: -1000px; width: 640px; height: 640px; background: #000;" type='2d' id="myCanvas"></canvas>
分享时调用 shareimg 为分享图片的地址
注意: 图片过大的时候导致界面画布加载过长导致微信小程序卡死情况;
可以对下载的图片进行等比缩放使他画布大小变小