uni-app canvas页面展示正常但保存的base64不完整

uni-app canvas页面展示正常但保存的base64不完整

示例代码：

下面参数无论是否指定 x,y,width,height 这些参数都会出现图片只有一半的情况。保持默认图片也是只有一半。

ctx.draw(false,() => {  
    console.log('aaa')  
    uni.canvasToTempFilePath({  
        x:0,  
        y:0,  
        width: 375,  
        height: 667,  
        destWidth: 760,  
        destHeight: 1334,  
      canvasId: 'myCanvas',  
      success: function(res) {  
        // 在H5平台下，tempFilePath 为 base64  
        console.log(res.tempFilePath)  
      }   
    })  
})

操作步骤：

H5 端，渲染图片后，调用uni.canvasToTempFilePath 将图片转为 base64

预期结果：

期望和页面中图片一样。

实际结果：

实际图片大小可以指定，但转换 base64 后的图片只有一半。

bug描述：

canvas渲染在页面显示正常，但是通过保存获取的 base64 图片只渲染了一半。


| 项目信息 | 描述 |
|----------|------|
| 产品分类 | uniapp/H5 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.4.7 |
| 浏览器平台 | Chrome |
| 浏览器版本 | 101.0.4951.67 |
| 项目创建方式 | HBuilderX |

![https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220526/4c96e6a63a0bfe4ce771bdaa2807e77d.png](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220526/4c96e6a63a0bfe4ce771bdaa2807e77d.png)

![https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220526/93d86bb803a4984bb29e73386e0fd117.png](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20220526/93d86bb803a4984bb29e73386e0fd117.png)

更多关于uni-app canvas页面展示正常但保存的base64不完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

问题在canvas这里吧，宽高，位置，设置了吗

更多关于uni-app canvas页面展示正常但保存的base64不完整的实战教程也可以访问 https://www.itying.com/category-93-b0.html


遇到同样问题！

我没能解决，也没能说服领导。人已经被裁了

在使用 uni-app 开发时，如果你发现 canvas 页面展示正常，但保存的 base64 数据不完整，可能是由于以下几个原因导致的。以下是一些可能的原因和解决方案：

1. Canvas 绘制未完成

  • 原因：在 canvas 绘制过程中，如果绘制操作还未完成就调用了 canvasToTempFilePath 或 toDataURL，可能会导致生成的 base64 数据不完整。
  • 解决方案：确保所有绘制操作完成后，再调用保存方法。可以使用 setTimeout 延迟调用，或者监听绘制完成的事件。
setTimeout(() => {
    uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
            console.log(res.tempFilePath); // 生成的临时文件路径
        },
        fail: (err) => {
            console.error(err);
        }
    });
}, 500); // 延迟 500ms 确保绘制完成

2. Canvas 尺寸问题

  • 原因：如果 canvas 的宽度或高度为 0，或者设置的尺寸与实际绘制内容不匹配，可能会导致生成的 base64 数据不完整。
  • 解决方案：确保 canvas 的尺寸正确，并且与绘制内容匹配。
const ctx = uni.createCanvasContext('myCanvas');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 300, 200); // 确保绘制区域与 canvas 尺寸一致
ctx.draw();

3. Canvas 绘制内容超出范围

  • 原因：如果绘制的内容超出了 canvas 的边界，可能会导致生成的 base64 数据不完整。
  • 解决方案：检查绘制内容是否在 canvas 的范围内，并调整绘制逻辑。

4. Canvas 异步绘制问题

  • 原因：canvas 的绘制是异步的，如果在绘制未完成时调用保存方法，可能会导致数据不完整。
  • 解决方案：使用 ctx.draw 的回调函数确保绘制完成后再保存。
const ctx = uni.createCanvasContext('myCanvas');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 300, 200);
ctx.draw(true, () => {
    uni.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success: (res) => {
            console.log(res.tempFilePath);
        },
        fail: (err) => {
            console.error(err);
        }
    });
});

5. Canvas 跨域问题

  • 原因：如果 canvas 中绘制了跨域图片，可能会导致 toDataURL 或 canvasToTempFilePath 失败。
  • 解决方案：确保图片资源支持跨域，或者将图片转换为 base64 后再绘制。

6. Canvas 保存方法参数问题

  • 原因：uni.canvasToTempFilePath 或 toDataURL 的参数设置不正确，可能会导致保存失败或数据不完整。
  • 解决方案：检查参数是否正确，尤其是 canvasId 和 fileType。
uni.canvasToTempFilePath({
    canvasId: 'myCanvas',
    fileType: 'png', // 确保文件类型正确
    quality: 1, // 图片质量，0-1
    success: (res) => {
        console.log(res.tempFilePath);
    },
    fail: (err) => {
        console.error(err);
    }
});
回到顶部