photoshop生成器引入到electron项目（electron与photoshop建立通信）

已于 2023-08-08 13:50:52 修改
阅读量942 收藏
点赞数 1
文章标签： photoshop electron javascript uxp
于 2023-08-08 13:47:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44013946/article/details/132163982
版权

Photoshop引入了nodejs，在启动的时候，通过pipe调起nodejs运行时核心generator-builtin，通过KLVR机制与ps进行通信和交互，同时会加载用户编写的扩展。
这里记录一下引入时的踩坑过程

generator-core就是它的源码，electron的主进程是nodejs环境，如果可以将core这套代码在electron的主进程中运行，就达到我们建立electron与ps通信的目的了，生成器的功能非常强大，甚至可以获取图像原始数据
（这两套代码非常有年份，10年前的开源项目，还能跑起来兼容2023的ps版本，也是神奇）
下面是地址，分别是generator-core核心代码、core运行的插件demo
具体的原理可以看知乎一位大佬的文章：
https://zhuanlan.zhihu.com/p/643541900

https://github.com/adobe-photoshop/generator-core
https://github.com/adobe-photoshop/generator-getting-started

  1. 首先是将整套核心代码搬到项目中，安装相关依赖（generator-core）
    [图片]

运行electron主进程，发现会报错 Cannot find module ‘minimist’ 看了一下是optimist库的一个依赖
npm i minimist后再次运行 仍然无法解决（下面1、2是踩坑步骤，可以忽略）

  1. 在index.js直接require一个optimist模块，问题解决，后面发现是因为里面有minimist
  2. 后续出现了module q is not defined
    这时候再require q无效，说明1方案只是一个巧合，将minimist引到了主进程解决了minimist的报错，尝试将路径直接指向node_modules仍然无效，找不到对应的库

后面翻到core的入口文件：
[图片]
发现他的入口文件改动了module路径指向，导致整个core找不到node_modules
把这里注释掉，问题解决

再次跑electron主进程，发现electron会闪退，可能是一些参数相关的问题

core的运行命令

node app.js -v -f path1/path2

百度了一下这种命令是可以通过optimist这个库读取的，搜了一下入口文件，找到了optimist对象
这里将v参数加入改为true，f 填入core运行的插件plugin路径，从项目根目录出发指向plugin目录即可
[图片]

-v -f的报错解决，但控制台打印出现问题
[图片]

这里0.1.0有报错，全局搜了一下0.1.0，发现读的是electron的package.json，直接复制core的package.json进去，修改指向的路径
[图片]

再次运行
[图片]

插件的documentInfo已经打印成功，本次引入完成

Super灬Lin丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Electron开发入门（五）：项目打包
孟军建的博客
02-21 2060
一、安装 electron-packager PS：安装之前，先复制一份package.json文件到./app目录下，然后改下./app目录下package.json里 “main”: “app/main.js”的路径（去掉app/），不这样子的话，下面打包的时候会报错，有的版本识别不了应用路径。 1、使用命令 npm install --save-dev electron-pack
electron + vue + vite + qwebchannel 实现C++与JS通信
07-18
业务逻辑实现 QT WebSocket + QWebChannel 实现 C/C++ 与 javascript通信 界面使用前端electron + vue + vite + layui + qwebchannel.js 实现 qt子进程自动启动，websocket Client自动重连，C++与js/ts的双向异步...
Electron详解（二）：基本使用与项目打包
Java+GO+JS全栈工程师-鹤冲天的博客：编程辅导~商务合作~技术交流
06-21 8914
在使用Electron进行开发之前，您需要安装 Node.js，最低工作版本为 14.x，低于 14 的版本在后面的打包过程中可能会报错。（注意，因为 Electron 将 Node.js 嵌入到其二进制文件中，所以在 electron 应用运行时的 Node.js 版本与你本地电脑中运行的 Node.js 版本无关。（虽然您需要在开发环境安装 Node.js 才能编写 Electron 项目，但是 Electron 不使用您系统的 Node.js 环境来运行它的代码。
Electron Vue3 开发笔记（二）:成功构建Electron基础开发环境
weixin_42335178的博客
04-16 2529
基于yarn如何成功构建Electron基础开发环境
electron 的混合桌面之路 入门安装
Syudf的专栏
09-27 6516
不会C/C++的同学不要方，用JS也能写桌面程序了，虽然JS没有C++那样的性能，但是JS没有指针，没有指针，没有指针，在现在这个时代，我相信软件体积不是大问题，一百多的大小根本不是阻止electron装逼的障碍，优秀的Visual Studio 几个G我半句话都不说直接装，所以说electron拥有优秀的性能和用户体验就不方！
开源｜优酷动态模板研发体系为分发提效30%
阿里云技术
05-06 168
动态模板技术方案将客户端研发链路实现了串联，通过完备的工具化支撑体系，让开发者可以高效完成组件由原始设计稿到可运行代码的最短通路，本文将对研发体系中涉及到的核心模块就行介绍，希望对技术社区及广大开发者有一定帮助。
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
热门推荐
dvlinker的技术专栏
12-03 1万+
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
自动生成html页面工具,「工具」工具招聘|待遇|面试|怎么样-看准网
weixin_35225189的博客
05-31 50
关键是现在前端开发也不是铁板一块，那我就来分一分吧：代码编辑器统一用vsCode没有意见吧？如果你要抬杠说你喜欢用vim，来，Vim键盘映射搞起。静态页面(设计师):没有瞧不起静态页面的意思，而是在这样的场景下，一般需要前端工程师和设计紧密配合，所以一些设计工具诸如PhotoShop，Sketch的基础操作还是应该掌握的，当然只需要你去切切图，导出资源文件。静态页面大多会和浏览器兼容联系在一起，浏...
有意思的开源项目分享（持续更新，勤劳的搬运工，只放一些我感兴趣的）
weixin_44379605的博客
11-14 2181
因为github上登录太慢，所以每次找很麻烦，需要二次跳转，从这里记录，方便以后自己找。
开源中国 2018 新增开源软件最受欢迎 TOP 50
程序猿DD
01-31 2918
来源：开源中国本周开源中国陆续公布了两个年度榜单，分别是国产新秀榜 TOP 30 和国产新增榜 TOP 50。由于两个榜单的数据来源都是国内开源项目，所以会有部分项目同时...
QReader:二维码生成与解析软件（Electron桌面版）
04-28
二维码生成与解析软件（桌面版）日常生活中，在电脑端一出现二维码，都要掏出手机扫码，然后将信息发给电脑，相当繁琐该程序支持将二维码拖入程序中，返回二维码内容下一版本，将会继续实现以下功能：支持拖入网址、...
ElectronTasks：基于Electron构建的项目和任务管理器
02-06
这是一个管理任务和项目的简单程序目标是创建可从Electron使用的Microsoft Project克隆它已经在Mac和Windows上进行了测试
electron 简易编辑器
02-10
electron 简易编辑器
electron项目配置
06-06
electron项目配置
禁用PS/Photoshop等一系列Adobe旗下软件联网外传用户数据操作
kokool的博客
06-12 220
用盗版软件只是获得了使用权！
【CTF MISC】XCTF GFSJ0290 reverseMe Writeup（图像处理）
HEX9CF的技术博客
06-09 287
暂无。
「PS图像软件下载」Adobe Photoshop专业图像处理软件资源获取！
最新发布
Chen070707的博客
06-13 117
无论是制作海报、广告，还是进行数字艺术创作，Photoshop都能满足用户对于复杂合成的高要求。不仅如此，Photoshop还持续推出新的功能和改进，不断满足用户的新需求。随着技术的不断发展，Photoshop也在不断地进行创新和优化，保持着其在图像处理领域的领先地位。无论是简单的修图还是复杂的合成，Photoshop都能轻松应对，并为用户提供高质量的处理效果。Photoshop，无论是对于初学者还是资深设计师，Photoshop都以其易上手且深度足够的特性，赢得了广泛的赞誉。
游戏开发中的坑之十四
yijiankun100的开发日记
06-13 105
测试平台：Adroid引擎：Unity类型：竖版，头顶视角，计时闯关
vue项目引入electron详细方法
05-31
下面是在 Vue 项目中引入 Electron 的详细方法： 1. 首先，需要在 Vue 项目的根目录下安装 Electron： ``` npm install electron --save-dev ``` 2. 在项目根目录下创建一个 `main` 目录，并在该目录下创建一个 `index.js` 文件，用于启动 Electron： ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { // 创建浏览器窗口 let win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) // 加载 Vue 项目的主页面 win.loadURL('http://localhost:8080') // 打开开发者工具 win.webContents.openDevTools() } // Electron 初始化完成后执行的回调函数 app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 当所有窗口都关闭时退出应用 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) ``` 在 `package.json` 文件中添加以下脚本： ```json { "scripts": { "electron": "electron main/index.js" } } ``` 3. 修改 `vue.config.js` 文件，在开发模式下执行 `electron` 命令启动 Electron： ```javascript module.exports = { // ... devServer: { before (app, server) { if (process.env.NODE_ENV === 'development') { const electron = require('child_process').spawn('npm', ['run', 'electron']) electron.stdout.on('data', data => { console.log(data.toString()) }) electron.stderr.on('data', data => { console.error(data.toString()) }) electron.on('close', code => { console.log(`Electron exited with code ${code}`) }) } } } } ``` 4. 在 `public` 目录下创建一个 `electron.js` 文件，用于判断当前是否在 Electron 中运行： ```javascript window.isElectron = navigator.userAgent.toLowerCase().indexOf(' electron/') > -1 ``` 5. 修改 `public/index.html` 文件，根据当前是否在 Electron 中运行来加载不同的脚本： ```html <body> <noscript> <strong>We're sorry but my-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <script> if (window.isElectron) { require('./electron.js') } else { document.write('<script src="http://localhost:8080/js/chunk-vendors.js"></script><script src="http://localhost:8080/js/app.js"></script>') } </script> </body> ``` 6. 最后，在命令行中执行以下命令启动 Vue 项目： ``` npm run serve ``` 在浏览器中访问 `http://localhost:8080`，即可看到 Vue 项目的主页面。同时，在命令行中执行以下命令启动 Electron： ``` npm run electron ``` 即可看到 Electron 窗口中加载了 Vue 项目的主页面。 注意：在 Electron 中使用 Vue，需要在 `webPreferences` 中设置 `nodeIntegration` 为 `true`，这样才能在渲染进程中使用 Node.js 模块。但是，这样也会存在一些安全问题，需要注意。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值