千图云设计获取可编辑图片素材
本帖最后由 Baytars 于 2022-6-11 10:48 编辑在千图云设计上看到中意的图片，想下载可编辑的PDF格式但是没有开会员。但是有HTML和爬虫基础的话可以分析一下页面源码以及网络请求。选择中意的图片进入编辑页面后，可以看到网址的格式是类似于`https://designer-ue.58pic.com/?picId=[数字]&template_type=1`这样的。
# 网络请求分析
打开浏览器的开发者工具，切换到网络标签，分析一下网络请求，发现该图片被分为若干部分分别请求，通过获取一个网址，一劳永逸地得到整个可编辑图像的方法是不切实际的。
# HTML分析
通过分析其HTML发现，我们所需要的部分都位于ID为`canvasContent`的div容器内。
怀着试试的心态，把这个容器的outerHTML全部复制了下来，粘贴到新的html文件中，最后通过浏览器打开，出人意料的是，完全还原了原图的布局。
# HTML转可编辑图片格式
接下来就简单了，只需要找个工具把该html文件无损转换为PDF或svg等可编辑图片格式就好了。`pandoc`这个工具是一个选项，不过转换得到的PDF文件并不能适应原html页面的大小。最后我的转换方案如(https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1627#issuecomment-46917336)所述：先使用(https://wkhtmltopdf.org/)将html文件转换为svg矢量图格式，再使用Inkscape矢量图编辑软件打开，导入该svg图片，在File > Document Properties中有`Resize page to content`选项，我们只需要取消svg群组，将看不见的那些背景框架以及图片周围的阴影删掉，再`Resize page to content`，一张与原图尺寸匹配的可编辑图片就制作完成，如果确需要再转为pdf格式，再找类似于`pandoc`或`ffmpeg`这样的工具即可。 jmsdqwl 发表于 2022-6-11 08:28
安装个浏览器插件 能获取全部图片的就行吧
我弄过线编辑海报的那种网站都是那么弄 把图片获取到在自己拼接 ...
图片单独获取再自己拼接是可以，但丧失了原图的位置数据，对于强迫症来说不是太友好。千图网的这个案例算是非常巧合，单独取出图片节点部分的HTML，原图的布局也还是保存得很完好，说明外部CSS没有影响到图片元素的布局，图片所有元素的位置信息都在这个节点内部，算是一个非常特殊的例子，故分享出来，给大家提供这样一个信息。 安装个浏览器插件 能获取全部图片的就行吧
我弄过线编辑海报的那种网站都是那么弄 把图片获取到在自己拼接 不是会员也行 感谢分享 PSD等原始文件能获取么？ 没有图片么 感谢大佬的无私分享。 情天娃娃 发表于 2022-6-11 09:37
PSD等原始文件能获取么？
我获取到的并不是原始文件，只是在编辑目标图片过程中千图网必须暴露的一些图片数据，通过这些图片数据能够很好地重建原图。当然，既然能够得到svg矢量图格式的文件，那转换成PSD格式也只是工具的选择问题而已了。
页:
[1]
2