uni-app canvas canvasToTempFilePath方法高度受限

uni-app canvas canvasToTempFilePath方法高度受限

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

操作步骤：

<template>  
    <view class="page">  
        <view>canvas:</view>  
        <canvas canvas-id="cnavas" style="width: 300px;:style="'height:' + height + 'px'"</canvas>  
        <view>图片：</view>  
        <image :src="path" mode="widthFix"></image>  
    </view>  
</template>

export default {  
    data: () => ({  
        path: '',  
        height: 320  
    }),  

    created() {},  
    mounted() {  
        var context = uni.createCanvasContext('cnavas');  
        context.setStrokeStyle('#00ff00');  
        context.setLineWidth(5);  
        context.rect(0, 0, 200, this.height-10);  
        context.stroke();  
        context.setStrokeStyle('#ff0000');  
        context.setLineWidth(2);  
        context.moveTo(160, 100);  
        context.arc(100, 100, 60, 0, 2 * Math.PI, true);  
        context.moveTo(140, 100);  
        context.arc(100, 100, 40, 0, Math.PI, false);  
        context.moveTo(85, 80);  
        context.arc(80, 80, 5, 0, 2 * Math.PI, true);  
        context.moveTo(125, 80);  
        context.arc(120, 80, 5, 0, 2 * Math.PI, true);  
        context.stroke();  
        context.draw();  
        setTimeout(this.canvasToTempFilePath, 300)  
    },  
    methods: {  
        canvasToTempFilePath() {  
            uni.canvasToTempFilePath({  
              x: 0,  
              y: 0,  
              width: 300,  
              height: this.height,  
              canvasId: 'cnavas',  
              success: (res) => {  
                this.path = res.tempFilePath  
              }   
            })  
        }  
    }  
};

更多关于uni-app canvas canvasToTempFilePath方法高度受限的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

官方大大们解决下这个BUG

更多关于uni-app canvas canvasToTempFilePath方法高度受限的实战教程也可以访问 https://www.itying.com/category-93-b0.html


2.9.8 版本还好的，3.1.2就出问题了

HBuilderX.3.0.7 也是好的

问题已确认，已加分，下版修复

HBuilderX 3.1.3 alpha 已修复

我3.1.4为什么还有这个问题

关于uni-app中canvasToTempFilePath方法的高度限制问题，这是由于微信小程序底层对canvas导出图片有尺寸限制：

  1. 在微信小程序环境中，canvasToTempFilePath导出的图片高度最大为4096px（宽度限制也是4096px）

  2. 当你的canvas高度超过这个限制时，导出会失败但不会报错，导致获取不到tempFilePath

解决方案：

  1. 对于大尺寸canvas，需要分段渲染和导出：
// 分段导出示例
const chunkHeight = 4000; // 每段高度
const totalHeight = this.height;
let chunks = Math.ceil(totalHeight / chunkHeight);

for(let i=0; i<chunks; i++){
    const y = i * chunkHeight;
    const h = Math.min(chunkHeight, totalHeight - y);
    
    uni.canvasToTempFilePath({
        x: 0,
        y: y,
        width: 300,
        height: h,
        canvasId: 'cnavas',
        success: (res) => {
            // 处理分段导出的图片
        }
    })
}
回到顶部