千图云设计获取可编辑图片素材

Baytars

在千图云设计上看到中意的图片，想下载可编辑的PDF格式但是没有开会员。但是有HTML和爬虫基础的话可以分析一下页面源码以及网络请求。选择中意的图片进入编辑页面后，可以看到网址的格式是类似于https://designer-ue.58pic.com/?picId=[数字]&template_type=1这样的。

网络请求分析

打开浏览器的开发者工具，切换到网络标签，分析一下网络请求，发现该图片被分为若干部分分别请求，通过获取一个网址，一劳永逸地得到整个可编辑图像的方法是不切实际的。

图片各部分是分开请求的

HTML分析

通过分析其HTML发现，我们所需要的部分都位于ID为canvasContent的div容器内。

图片各部分都在canvasContent容器内

怀着试试的心态，把这个容器的outerHTML全部复制了下来，粘贴到新的html文件中，最后通过浏览器打开，出人意料的是，完全还原了原图的布局。

图片布局很好保留

HTML转可编辑图片格式

接下来就简单了，只需要找个工具把该html文件无损转换为PDF或svg等可编辑图片格式就好了。pandoc这个工具是一个选项，不过转换得到的PDF文件并不能适应原html页面的大小。最后我的转换方案如Github issue所述：先使用wkhtmltoimage将html文件转换为svg矢量图格式，再使用Inkscape矢量图编辑软件打开，导入该svg图片，在File > Document Properties中有Resize page to content选项，我们只需要取消svg群组，将看不见的那些背景框架以及图片周围的阴影删掉，再Resize page to content，一张与原图尺寸匹配的可编辑图片就制作完成，如果确需要再转为pdf格式，再找类似于pandoc或ffmpeg这样的工具即可。

Baytars

jmsdqwl 发表于 2022-6-11 08:28
安装个浏览器插件 能获取全部图片的就行吧
我弄过线编辑海报的那种网站都是那么弄 把图片获取到在自己拼接 ...

图片单独获取再自己拼接是可以，但丧失了原图的位置数据，对于强迫症来说不是太友好。千图网的这个案例算是非常巧合，单独取出图片节点部分的HTML，原图的布局也还是保存得很完好，说明外部CSS没有影响到图片元素的布局，图片所有元素的位置信息都在这个节点内部，算是一个非常特殊的例子，故分享出来，给大家提供这样一个信息。

jmsdqwl

安装个浏览器插件 能获取全部图片的就行吧
我弄过线编辑海报的那种网站都是那么弄 把图片获取到在自己拼接 不是会员也行

你是我的人

感谢分享

情天娃娃

PSD等原始文件能获取么？

测试学学

没有图片么

lao_jin

感谢大佬的无私分享。

Baytars

情天娃娃 发表于 2022-6-11 09:37
PSD等原始文件能获取么？

我获取到的并不是原始文件，只是在编辑目标图片过程中千图网必须暴露的一些图片数据，通过这些图片数据能够很好地重建原图。当然，既然能够得到svg矢量图格式的文件，那转换成PSD格式也只是工具的选择问题而已了。