这是一个创建于 961 天前的主题，其中的信息可能已经有所发展或是发生改变。
下载的 1 倍图，也就 2000 × 2000 像素，也就是其实每个像素就是一个固定色块，用的 illustrator 临摹它不会按照一个像素一个方块给你转化，是否有其他办法可以转化？
 |
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
这是这个 950KB 大小的 PNG.
 |
 |
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 个方块，就是无聊，想试一试会怎么样，比如文件多大，卡不卡。 |
Select Language