uni-app uni.canvasToTempFilePath设置导出图片大小后图片严重失真

uni-app uni.canvasToTempFilePath设置导出图片大小后图片严重失真

测试过的手机

华为、小米、vivo、oppo、一加、苹果、锤子

示例代码

uni.canvasToTempFilePath({
canvasId: 'canvasId',
width: width,
height: height,
destWidth: 100,
destHeight: 50,
success: res2 => {
console.log(
`生成的图片：${res2.tempFilePath}`
);
resolve(
res2.tempFilePath
);
clearTimeout(time)
},
fail: er => {
console.log('图片生成失败的返回---', er)
}
})

操作步骤

  1. 画布上画图
  2. 保存画布图片

预期结果

图片尺寸变小，清晰图不变

实际结果

尺寸达到要求，导出的图片清晰度很模糊，严重失真

bug描述

uni.canvasToTempFilePath设置导出图片大小后，图片严重失真


### 表格
| 项目         | 信息               |
|--------------|--------------------|
| 产品分类     | uniapp/App         |
| PC开发环境   | Mac                |
| PC版本号     | 11.3.1             |
| HBuilderX    | 正式               |
| HBuilderX版本| 3.2.2              |
| 手机系统      | 全部               |
| 手机厂商      | 华为               |
| 页面类型     | vue                |
| 打包方式     | 云端               |
| 项目创建方式 | HBuilderX          |

更多关于uni-app uni.canvasToTempFilePath设置导出图片大小后图片严重失真的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.canvasToTempFilePath设置导出图片大小后图片严重失真的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的画布导出问题。destWidth和destHeight参数设置过小会导致图片像素压缩严重，从而产生失真。

核心原因是：当目标尺寸远小于原始画布尺寸时，像素信息会大量丢失。虽然尺寸变小了，但像素密度不足导致模糊。

解决方案：

  1. 调整原始画布尺寸：在创建画布时，使用与目标尺寸接近的原始尺寸
// 创建画布时使用接近目标尺寸的width/height
const ctx = uni.createCanvasContext('canvasId', this)
ctx.draw()
  1. 使用高质量缩放：通过CSS或画布API先进行高质量缩放
// 先绘制到合适尺寸的画布上
const scale = 2 // 使用2倍或更高分辨率
ctx.scale(scale, scale)
// ...绘制内容
回到顶部