tdesign-vue-next icon indicating copy to clipboard operation
tdesign-vue-next copied to clipboard

[image-viewer] 下载功能会导致保存的图片增大

Open Lnncoco opened this issue 3 months ago • 6 comments

tdesign-vue-next 版本

1.16.1

重现链接

https://tdesign.tencent.com/vue-next/components/image-viewer?tab=demo

重现步骤

  1. 使用图片预览组件
  2. 点击查看图片, 右键另存为图片
  3. 点击下载按钮, 保存第二份图片
  4. 两份图片不一致, 使用下载功能保存的图片更大. 官网示例会增大一点点, 自己项目内的图片600K能变到9MB

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Lnncoco avatar Sep 08 '25 02:09 Lnncoco

👋 @Lnncoco,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Sep 08 '25 02:09 github-actions[bot]

目前下载的解决方案是使用canvas“画出来”再下载,进而的导致文件变大

源码:

Image

Wesley-0808 avatar Sep 08 '25 15:09 Wesley-0808

因为无法确定图片来源是否跨域,无法统一 fetch 目前可以通过自定义 onDownload 处理预览图片的下载逻辑

RylanBot avatar Oct 23 '25 12:10 RylanBot

不过「图片 600K 能变到 9MB」确实有点夸张了 如果方便的话,可以提供一下原图,我们看一下如何优化?

RylanBot avatar Oct 28 '25 06:10 RylanBot

7908.zip 原图找不到了,找了张类似的,这张图片 631KB -> 4.09MB @RylanBot

上次处理时,每个使用地方增加下载逻辑非常麻烦,这个功能并不是需求中的,只是使用组件库自然带来的。想直接屏蔽了,但查了文档发现没有配置操作按钮的能力,希望能有这个配置能力。

Lnncoco avatar Oct 29 '25 09:10 Lnncoco

好的,未来应该会新增自定义工具栏的配置 目前临时方案可能是通过定位元素,利用 CSS 将下载按钮 display: none;

内置的下载图片逻辑优化后会在评论区同步你

RylanBot avatar Oct 29 '25 10:10 RylanBot