uni-app canvas，h5 在手机浏览器上会自动放大导致导出的图片发虚

uni-app canvas，h5 在手机浏览器上会自动放大导致导出的图片发虚

开发环境 版本号 项目创建方式
Windows win10 企业版 HBuilderX

操作步骤：

生成h5，chrome浏览器开发工具中，设置是否使用设备仿真，不适用时尺寸正常，使用后，canvas尺寸会根据设备放大

预期结果：

开启设备仿真后canvas会放大

实际结果：

导出的图片放大，发虚

bug描述：

设置了canvas宽度为800，高度为562。 禁用设备仿真，canvas的大小是 800* 562
开启设备仿真后，canvas的尺寸会放大，设置的样式不起作用，造成导出的图片时放大只会的图片，然后图片发虚

Image Image


更多关于uni-app canvas，h5 在手机浏览器上会自动放大导致导出的图片发虚的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app canvas，h5 在手机浏览器上会自动放大导致导出的图片发虚的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是因为在H5环境下，设备仿真模式会触发浏览器的视口缩放机制，导致canvas渲染尺寸与逻辑尺寸不一致。核心问题在于canvas的CSS像素与设备像素比例不匹配。

解决方案：

  1. 使用uni.getSystemInfoSync()获取设备的pixelRatio
  2. 在创建canvas时，将canvas的width和height乘以pixelRatio
  3. 同时通过CSS将canvas显示尺寸设置为原始逻辑尺寸

示例代码：

const systemInfo = uni.getSystemInfoSync()
const pixelRatio = systemInfo.pixelRatio
const canvasWidth = 800 * pixelRatio
const canvasHeight = 562 * pixelRatio

// 创建canvas上下文
const ctx = uni.createCanvasContext('myCanvas', this)
ctx.scale(pixelRatio, pixelRatio)

// 绘制内容...
ctx.draw()
回到顶部