1
noe132 2022-04-08 15:24:13 +08:00
我只能说,生成的文件会有点大。
用开发者工具选中 canvas 元素然后运行下面的代码 d = $0.getContext('2d') rects = Array(2000).fill(0).flatMap((_, rowIndex) => Array(2000).fill(0).map((_, columnIndex) => { const rgb = d.getImageData(rowIndex,columnIndex,1,1).data.slice(0, 3) const rect = `<rect x="${rowIndex}" y="${columnIndex}" width="1" height="1" fill="rgb(${rgb[0]},${rgb[1]},${rgb[2]})" />` return rect })).join('\n') svg = `<svg width="2000" height="2000" viewBox="0 0 2000 2000" xmlns="http://www.w3.org/2000/svg"> ${rects} </svg>` console.log(svg) 生成的 svg 大小是 261MB 。这个 svgchrome 打开不到一般,tab 内存占用飙到 6G 后页面崩溃了。 相对于直接导出成 png ,文件大小是 2.5M 。使用更高压缩比例可以压到 950KB 。 |
2
noe132 2022-04-08 15:25:43 +08:00 1
|
3
villivateur 2022-04-08 15:26:46 +08:00 via Android
这个图本身就是位图,你硬要转换成矢量图有点不划算啊
|
4
CSGO OP @noe132 如果把一个色块用作一个图形勾出来,会不会 svg 小一点? png 或者 jpg 肯定小啊,因为其实就 2000px 图片而已。
|
5
Showfom 2022-04-08 17:33:29 +08:00
@noe132 # 2 你这个不完整呀,看我下载来的 20MB 的超大 png
https://dulei.si/files/2022/04/08/7b5cae3b1cc073bfffcf7b6c0a56113f.png |
6
jim9606 2022-04-08 18:01:50 +08:00 1
本身就是位图,硬转成矢量图没有任何意义,无损转成 svg 的话肯定更大。
原始分辨率是 2000x2000 ,那里给的高分图就是单纯扩增出来的,没有新信息,基本没有使用价值。PNG 本身就是无损的,所以只要未经有损变换,不会丢失任何信息。 https://www.reddit.com/r/place/comments/txvk2d/rplace_datasets_april_fools_2022/ 试了下转无损模式的 AVIF/HEIF ,反而变大了,看来这种高频很多的图想要无损是没什么太好的压缩方法的。 |
7
ysc3839 2022-04-08 18:05:47 +08:00 1
本来就是个位图,转成 svg 没意义。
怀疑这是个 X-Y Problem https://coolshell.cn/articles/10804.html 建议直接说最终需求 |
8
noe132 2022-04-08 18:10:33 +08:00 1
@Showfom 你这个图感觉不太对,似乎被缩放 /重采样了。
原图地址下载下来也只有 1.01MB https://styles.redditmedia.com/t5_2sxhs/styles/image_widget_3egzhxzd7zr81.png 用 apngopt 压缩一下可以压到 960KB 左右 |
9
CSGO OP @ysc3839 这个 X-Y Problem 很有意思,经常遇到别人问我问题就是这个。
不过我这需求是想导入 figma 里,我想这无非就是 400w 个方块,就是无聊,想试一试会怎么样,比如文件多大,卡不卡。 |