企业官网建设流程全解析

Infinite-Canvas插件生态：Chrome素材采集与Photoshop直连功能详解

【免费下载链接】Infinite-CanvasSupports comfyui/API calls/modelscope calls项目地址: https://gitcode.com/gh_mirrors/infini/Infinite-Canvas

Infinite-Canvas是一款支持comfyui/API调用/modelscope调用的开源项目，其强大的插件生态为用户提供了丰富的功能扩展。本文将详细介绍其中的Chrome素材采集插件和Photoshop直连插件，帮助用户快速掌握这两个实用工具的使用方法，提升素材管理和设计工作的效率。

Chrome素材采集插件：一站式网页素材获取工具

安装步骤：简单几步开启素材采集之旅

1. 打开Chrome浏览器，在地址栏输入chrome://extensions/进入扩展程序页面。
2. 右上角开启「开发者模式」，此时页面会出现「加载已解压的扩展程序」按钮。
3. 点击该按钮，选择项目中的tools/chrome-local-asset-importer目录，即可完成插件安装。

功能亮点：全方位素材捕捉能力

该插件能够扫描当前网页中的多种素材，包括普通http/https图片、视频，blob:资源（如飞书文档），data:内联图片、SVG<image xlink:href>（如夸克文档整页渲染），跨域<iframe>内的素材，<canvas>画布内容（如腾讯文档、网页版 PDF、图表）等。

对于视频素材，插件会扫描<video>、source标签以及.mp4/.webm/.mov/.m4v/.flv直链，还会嗅探网络请求里通过XHR/fetch加载的媒体，合并进扫描结果。

此外，插件还提供了「扫描前自动滚动加载」功能，可触发长文档/懒加载页面把图片渲染出来再扫描；「截取当前可见画面」按钮则适用于地图、WebGL、加密画布等toDataURL读出来是黑屏的内容。

使用方法：轻松导入与管理素材

1. 先启动Infinite Canvas后端服务。
2. 点击浏览器右上角插件图标，输入服务地址，例如127.0.0.1:8767、192.168.1.10:3000，也可以填写完整地址http://192.168.1.10:3000，然后点击「连接」。
3. 可点击图钉按钮打开Chrome侧边栏，侧边栏不会因为切换页面而关闭。
4. 在任意网页点击「扫描」，插件会列出当前页面可访问的图片。
5. 勾选图片，选择平台和模型，可开启「导入后智能分类」，点击「导入所选」。
6. 也可以点「下载到本地」把所选素材直接存到浏览器下载目录，这一步不需要连接后端，可当作独立采集工具使用。选多张时会自动打包成一个zip压缩包（以「文件夹」命名），单张则直接下原文件。

导入后的文件会写入assets/uploads/<你填写的文件夹>，素材库管理页面的「本地素材」会同步显示这些图片；智能分类结果会写入同名.classification.json。

Photoshop直连插件：无缝衔接设计工作流

插件概述：双向打通资产库与PS

Infinite Canvas的Photoshop插件是一个Adobe Photoshop UXP面板插件，通过局域网地址连接Infinite Canvas后端，实现了资产库与PS的双向打通。它可以将资产库中的图片素材置入当前PS文档，也可以把当前PS文档导出成PNG存进选中的图片分组，并且支持实时同步，连上后端的WebSocket后，资产库有变化时面板会自动刷新。

快速上手：简单配置即可使用

1. 启动Infinite Canvas后端（启动服务.bat/python main.py）。
2. 在Photoshop里打开「大雄资产库」面板。
3. 顶部填入服务地址，本机可填127.0.0.1:8767（按实际端口），局域网则填跑后端那台电脑的IP:端口，例如192.168.1.10:3000。
4. 点「连接」，绿点表示已连接。
5. 用「资产库/分组」下拉切换，点素材选中后，可选择「置入当前文档」（双击素材也可）或「打开」（在外部浏览器打开原图/视频）。
6. 底部「把当前文档存到此分组↑」按钮可将当前PS文档合并导出为PNG，存入选中的图片分组。

地址会被记住，下次打开点「连接」即可恢复。右上「实时」勾选后，画布/网页那边新增素材，面板会自动刷新。

调试安装：开发者的进阶之路

如果需要进行插件调试，可按以下步骤操作：

1. 安装Adobe UXP Developer Tool（UDT）。
2. 打开Photoshop（24.0以上）。
3. 在UDT中点击Add Plugin，选择项目中的tools/photoshop-asset-connector/manifest.json文件。
4. 点击Load，在PS的「增效工具」菜单里打开「大雄资产库」。

接口契约：技术细节一览

该插件与后端通过以下接口进行交互：

• 读取资产库：GET /api/asset-library，返回{ library: { libraries, active_library_id } }。
• 上传字节：POST /api/ai/upload（multipart），返回{ files:[{ url:"/assets/input/…", kind, name }] }。
• 存入分组：POST /api/asset-library/items，体{ library_id, category_id, url, name }，仅图片类分组。
• 实时刷新：WS /ws/stats，收到{ type:"asset_library_updated" }触发刷新。

代码结构：模块化设计

插件采用多<script>+ 全局DX命名空间的模块化设计，脚本按依赖顺序加载：state → net → sources → ps → socket → app。主要文件包括index.html（外壳）、style.css（样式）、js/state.js（共享状态）、js/net.js（网络相关）、js/sources.js（数据源适配器）、js/ps.js（PS操作）、js/socket.js（WebSocket实时同步）、js/app.js（启动与事件）。

总结：提升效率的得力助手

Infinite-Canvas的Chrome素材采集插件和Photoshop直连插件，为用户打造了从素材获取到设计创作的完整工作流。通过这两个插件，用户可以轻松采集网页素材并高效管理，同时实现与Photoshop的无缝衔接，大大提升了工作效率。无论是新手还是专业用户，都能快速上手并从中受益。

如果你还没有体验过Infinite-Canvas的插件生态，不妨通过以下方式获取项目：git clone https://gitcode.com/gh_mirrors/infini/Infinite-Canvas，开启你的高效设计之旅。

【免费下载链接】Infinite-CanvasSupports comfyui/API calls/modelscope calls项目地址: https://gitcode.com/gh_mirrors/infini/Infinite-Canvas