uni-app uni.canvasToTempFilePath 显示不全

uni-app uni.canvasToTempFilePath 显示不全

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.3

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：电脑+手机

页面类型：vue

打包方式：云端

操作步骤：
- 代码没动过，Hbuilder最新版

预期结果：
- 显示全

实际结果：
- 显示一半

bug描述：
- 升级Hbuilder版本后，uni.canvasToTempFilePath返回的图片显示不全
- 被坑惨了

更多关于uni-app uni.canvasToTempFilePath 显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

解决了没，我也遇到这个问题了，IOS只有一半

更多关于uni-app uni.canvasToTempFilePath 显示不全的实战教程也可以访问 https://www.itying.com/category-93-b0.html


升级到3.1.4

这是一个已知的兼容性问题，在HBuilderX 3.1.3版本中确实存在canvasToTempFilePath生成图片显示不全的bug。

主要原因是新版渲染引擎对canvas尺寸计算逻辑发生了变化。建议：

  1. 临时解决方案：在canvasToTempFilePath调用前，手动设置canvas的width和height属性
const query = uni.createSelectorQuery().in(this);
query.select('#myCanvas').fields({
  node: true,
  size: true
}).exec((res) => {
  const canvas = res[0].node;
  const ctx = canvas.getContext('2d');
  // 显式设置尺寸
  canvas.width = res[0].width;
  canvas.height = res[0].height;
  
  uni.canvasToTempFilePath({
    canvas: canvas,
    success: (res) => {
      console.log(res.tempFilePath);
    }
  });
});
回到顶部