小程序canvas居中剪裁绘制图片

最新推荐文章于 2024-05-31 20:04:25 发布

weixin_33909059

最新推荐文章于 2024-05-31 20:04:25 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b052fdbf265da0b7452871f

本文介绍如何使用微信小程序API将图片等比例缩放到指定画布大小，并确保图片不变形。通过获取图片实际尺寸并计算其在画布上的显示尺寸及位置，最终实现图片在画布中居中显示且不被拉伸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如上图，绘制图片时，将图片等比例缩放至铺满画布，然后只显示图片最中间部分。

获取图片信息

wx.getImageInfo({
    src: url,
    success: function (res) {
      resolve(res);
    },
    fail: function (error) {
      console.log("读取头像错误", error)
      reject(error);
    }
})
复制代码

2.获取图片在绘制时的宽高及坐标

getCanvasInfo(canvW,canH){
    const imgX = head_img.width;//图片的实际宽度
    const imgY = head_img.height;//图片的实际高度
    let dWidth = 0;//图片按比例缩放后的宽
    let dHeight = 0;//图片按比例缩放以后的高
    if (imgX > imgY) {
      dHeight = canH;
      dWidth = imgX / (imgY / canH);
      if (dWidth < canvW) {
        dWidth = canvW;
        dHeight = imgY / (imgX / canvW);
      }
    } else {
      dWidth = canvW;
      dHeight = imgY / (imgX / canvW);
      if (dHeight < canH) {
        dHeight = canH;
        dWidth = imgX / (imgY / canH);
      }
    }
    const dx = (dWidth - canvW) / 2;//图像的左上角在目标canvas上 X 轴的位置
    const dy = (dHeight - canH) / 2;//图像的左上角在目标canvas上 Y 轴的位置
}

复制代码

开始绘制图片

const canvW = 650;//画布的宽
const canvH = 575;//画布的高
getCanvasInfo(canvW,canH)
context.drawImage(img, -dx, -dy, dWidth, dHeight);
复制代码

至此就可以得到一个不会被拉伸或者挤压变形的图片了。

转载于:https://juejin.im/post/5b052fdbf265da0b7452871f