uni-app canvasContent.drawImage 在 app Android 中不能缩放图片尺寸为设置的值

uni-app canvasContent.drawImage 在 app Android 中不能缩放图片尺寸为设置的值

操作步骤：

.

预期结果：

.

实际结果：

,

bug描述：

1 为 app ; 2 为 微信小程序； 可以看到图1中猫的图片很大，图片的原始尺寸是 750 * 510

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210810/71d7373fab12e8bf295dcbbfaf348a42.jpg

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210810/e1a741b391f8bcf2483193ab99f47d22.jpg

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win11
手机系统 Android
手机系统版本 Android 9.0
手机厂商 小米
手机机型 红米 6x
页面类型 vue
打包方式 云端
项目创建方式 CLI
CLI版本号 2.0.0-31920210709003

更多关于uni-app canvasContent.drawImage 在 app Android 中不能缩放图片尺寸为设置的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

解决了，绘制的 width/height 是 String 类型导致的，虽然这样，但是 string 值 在小程序 和 H5 平台未出现相同问题。

更多关于uni-app canvasContent.drawImage 在 app Android 中不能缩放图片尺寸为设置的值的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的App端（特别是Android），canvas的drawImage方法缩放问题通常与图片加载时机和Canvas API的实现差异有关。建议在调用drawImage前确保图片已完全加载，并使用uni.getImageInfo获取图片信息后再进行绘制。

示例代码：

uni.getImageInfo({
  src: '图片路径',
  success: (res) => {
    const ctx = uni.createCanvasContext('canvasId')
    // 使用获取到的实际宽高进行缩放计算
    const scale = Math.min(目标宽度/res.width, 目标高度/res.height)
    ctx.drawImage(res.path, 0, 0, res.width * scale, res.height * scale)
    ctx.draw()
  }
})
回到顶部