leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

最新版小程序导出图片变模糊

Open hcweb opened this issue 2 months ago • 6 comments

   const result = await leaferRef.current.export('png', {
            screenshot: true,
            scale: 10,
            quality: 1,
            width: displaySize.width * 10,
            height: displaySize.height * 10
        });

        setPreviewUrl(result.data);

无论怎么设置都是模糊

Image

导出前的图片

Image

导出后的图片

而且如果导出二进制会报错 const result = await leaferRef.current.export('png', true);

        setPreviewUrl(result.data);
Image

hcweb avatar Nov 02 '25 04:11 hcweb

小程序不支持导出二进制😂,高清图导出时需要设置pixelRatio: 2,文档里有示例

leaferjs avatar Nov 03 '25 01:11 leaferjs

小程序不支持导出二进制😂,高清图导出时需要设置pixelRatio: 2,文档里有示例

好的呢 了解了 谢谢 但是设置为pixelRatio: 2依然模糊 ` const result = await leaferRef.current.export("png", { screenshot: true, pixelRatio: 2, // scale: Math.max(pixelRatio, 2), // 至少2倍,保证清晰 //quality: 1, });

  console.log("生成预览图成功:", result);

  setPreviewUrl(result.data);

`

下面是result的值,因为小程序canvas层级的问题 遮住了我的设置弹出层,所以我把result.data作为了图片的src来显示 然后就很模糊

Image

hcweb avatar Nov 03 '25 01:11 hcweb

也可能是 screenshot 的原因,我到时看看。

试试再嵌套一个Frame, 然后导出这个Frame, 去掉screenshot参数, 再设置pixelRatio: 3, 这个设备分辨率最好取当前设备的像素比。

leaferjs avatar Nov 03 '25 02:11 leaferjs

也可能是 screenshot 的原因,我到时看看。

试试再嵌套一个Frame, 然后导出这个Frame, 去掉screenshot参数, 再设置pixelRatio: 3, 这个设备分辨率最好取当前设备的像素比。

依然模糊,我也搞不懂是为啥,这个是代码

Image Image Image Image

hcweb avatar Nov 03 '25 04:11 hcweb

试试直接导出到相册看看是不是模糊,导出的图片已经非常大了,也有可能是图片显示组件的配置问题?

leaferjs avatar Nov 03 '25 06:11 leaferjs

试试直接导出到相册看看是不是模糊,导出的图片已经非常大了,也有可能是图片显示组件的配置问题?

试了 还是模糊 用小程序原生canvas清晰点

hcweb avatar Nov 04 '25 02:11 hcweb