API规范

将数据传递给图片编辑器

可以在井号后使用参数配置。

https://ps.7du.me#STRING_VALUE

使用查询参数的经典编码（空格为％20等）将字符串值编码到URL中。 它对应于Javascript中的encodeURI（）或PHP中的urlencode（）。 该字符串包含JSON对象。

JSON配置对象

JSON对象必须具有以下结构：

{
	"files" : [
		"https://ps.7du.me/images/design.psd",
		"https://ps.7du.me/images/button.png",
		"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAA\
		AAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
	],
	"resources" : [
		"https://www.xyz.com/brushes/Nature.ABR",
		"https://www.xyz.com/grads/Gradients.GRD",
		"https://www.xyz.com/fonts/NewFont.otf"
	],
	"server" : {
		"version" : 1,
		"url"     : "https://www.myserver.com/saveImage.php",
		"formats" : [ "psd:true", "png", "jpg:0.5" ]
	},
	"environment" : {...},
	"script" : "app.activeDocument.resizeCanvas(90,80,AnchorPosition.TOPLEFT);"
}

可以使用数据URI – 文件可以在请求中传递(测试).
所有参数都是可选的。

参数

 

  • files – 启动时加载的文件数组
  • resources – 资源数组（渐变，画笔，字体……）
  • server – 用于将文档保存回服务器的参数
    • version – API的版本
    • url – 服务器的URL地址
    • formats – 格式，其中一个文件应该被发送到服务器。
      字符串格式对应于 saveToOE.
  • environment – 环境参数, 请参阅环境设置
  • script – script应该在加载每个文件后执行（可以很长）

保存到服务器

 

当 server 参数在ps.7du.me的请求中指定，
在图片编辑器中打开的每个文档都将具有 File - Save 选项。
用户单击它后，使用POST方法在HTTP请求中将文档数据发送到您的服务器。

图片编辑器将二进制数据（字节序列）发送到您的服务器，其中有两个部分：

  • 2000字节 – JSON数据
  • 其余的 – 一个或多个图像文件

JSON将具有以下结构：

{
	"source" : "https://www.mysite.com/images/button.png",
	"versions" : [
		{"format":"psd", "start":      0, "size": 700000 },
		{"format":"jpg", "start": 700000, "size": 100000 },
		...
	]
}
  • source – 如果文件是从服务器加载的，则该值是此文档的URL。
    否则（打开本地文件，创建一个空文件），它包含 "local,X,NAME",
    其中X是文档的整数ID，NAME是文档的名称
  • versions 不同版本的文档
    • format – 从图片编辑器导出的文件格式
    • start, size – 文件偏移量和大小（相对于JSON结尾）

这是一个简短的PHP示例，它接受来自图片编辑器的文件。

$fi = fopen("php://input", "rb"); 
 $p = JSON_decode(fread($fi, 2000));
// getting file name from "source"
$fname = substr ($p->source, strrpos($p->source,"/")+1);  
$fo = fopen("img/".$fname,"wb");
while($buf=fread($fi,50000)) fwrite($fo,$buf);
fclose($fi);
fclose($fo);

你的回应

在服务器收到文件后，它可以发回一个带有可选String参数的JSON响应：

  • message – 指定时，会向用户显示片刻
  • script – 指定时，将执行 (例如 您可以调用 app.echoToOE("saved");)
  • newSource – 指定时，将用作“source”的新值，以便将来保存到服务器
    （在编辑器中创建文件时可能很有用：“source”是“local，…”）

跨域资源共享

出于安全原因，webapps只能访问同一域中的文件。
为了让编辑器加载您的文件，服务器的响应必须包含以下标头：

Access-Control-Allow-Origin: *

欲知详情，请参阅 CORS规范 或参阅 enable-cors.org.

价格

API的使用完全免费。 请记住，PP处于开发的早期阶段，可能存在严重错误。 我们对由编辑器编辑或生成的文档不承担任何责任。

环境设置

参数配置

可以通过JSON的 environment 属性自定义编辑器的外观。

{
	...
	"environment" : {          
		"theme"     : 2,         "lang"     : "es",    
		"vmode"     : 0,         "intro"    : true,
		"eparams"   : { "guides" :true, "grid" : true, "gsize": 8,   
		                                "paths": true, "pgrid": true },
		"customIO"  : { "open": "app.echoToOE(\"Open\");" },
		"localsave" : false,     "autosave" : 120,    
		"showtools" : [0,5,9],   "menus"    : [ [1,1,0,1], 1, 0, 1, [0] ],
		"panels"    : [0, 2],
		
		"phrases"   : [ [1,0], "Open Design", [1,2], "Save Design" ],
		
		"topt"  : {  "t0": ...,  "t1": ...,  ... },
		"tmnu"  : {  "t0": ...,  "t1": ...,  ... },
		"icons" : {  "tools/crop": "https://www.me.com/img/crop.png",  ... },
		"plugins":[ ... ]
	}
}

每个参数都是可选的。 它们具有以下含义：

  • theme – 主题(0, 1, 2, …)
  • lang – 语言
  • vmode – 查看模式。 0：常规，1：面板折叠，2：隐藏所有面板
  • intro – 没有文件打开时，显示介绍面板（带按钮等）
  • eparams – 附加功能：启用或禁用指南，网格，路径，像素网格 …
  • customIO – 重新定义文件的行为 – 打开，保存等，然后运行自定义脚本。 可能的属性：“open”，“publish”，“save”，“saveAs”。
  • localsave – 启用/禁用“另存为PSD”，“保存为Web”和“在线发布”
  • autosave – 使用值X，编辑器将每X秒执行“文件 – 保存”
  • showtools – 仅显示以下工具（请参阅下面的工具ID）
  • menus – 使用 0/1标志指定File，Edit，Image …菜单的结构。 数组的每个元素都是0：隐藏项目，1：显示带有标准内容的项目，或者子项目的标志数组（递归工作）。 如果您的阵列短于所需数组，则会在末尾添加零。 查看Photopea的当前菜单结构以找到正确的值。 例如。 [1,1]作为第一个元素意味着“文件”菜单将仅显示“新建”和“打开”项目。
  • panels – 应该在侧边栏中显示哪些面板。 使用以下ID：
    0：历史，1：SWATCHES，2：LAYERS，3：INFO，4：HISTOGRAM，5：PROPERTIES，6：CSS，7：BRUSH，8：LAYERCOMPS，9：CHARACTER，10：PARAGRAPH。
  • phrases – 允许您用自己的替换Photopea中的任何短语。 aray的格式为 [ID1，W1，ID2，W2，...] ，其中IDx是某个短语的ID，Wx是新短语，应该使用它。
    一些有用的ID：[1,2]：保存（文件菜单），[2,0]：前进，[2,1]：后退。 要发现其他短语的ID，请熟悉 OpenWord表结构并在当前短语数据库中找到您的短语，或者只是给我们发送电子邮件至[email protected]。
  • topt – 工具选项。 允许您更改每个工具的设置。 键是“tXY”，其中XY是工具ID。 每个工具都有自己的格式（见下文）。
  • tmnu – 工具菜单。 允许您指定每个工具的顶部菜单的结构。 键是“tXY”，其中XY是工具ID。 每个工具都有自己的格式（见下文）。
  • icons – 自定义图标。 每个图标都有一个图标ID（key）和图像URL（value）。 您可以在此处找到图标ID。 例如。 裁剪工具具有ID”tools/crop”。 引言面板的背景为ID”intro”。
  • plugins – 查看描述

工具选项和菜单

移动工具

Options: [1,0,null]. 三个值表示自动选择，转换控件和距离。 1表示启用，0表示禁用，null：未指定。

Menu: [1,1,1,1,1,1]. 显示/隐藏六个项目的六个标志：自动选择，转换控件，距离，快速保存（获取PNG …），垂直对齐，水平对齐。

工具ID

  • 0: 移动工具
  • 1: 矩形工具
  • 2: 椭圆工具
  • 5: 套索工具
  • 6: 多边形套索工具
  • 7: 磁性套索工具
  • 8: 快速选择
  • 9: 魔法棒
  • 10: 裁剪工具
  • 14: 滴管
  • 16: 标尺
  • 18: 污点修复画笔工具
  • 19: 修复画笔工具
  • 20: 修补工具
  • 23: 刷子工具
  • 24: 铅笔工具
  • 27: 克隆工具
  • 31: 橡皮擦工具
  • 34: 渐变工具
  • 35：油漆桶工具
  • 36：模糊工具
  • 37：锐化工具
  • 38：涂抹工具
  • 39：减淡工具
  • 40：加深工具
  • 41：海绵工具
  • 47：输入工具
  • 42：钢笔
  • 43：自由钢笔
  • 51：路径选择
  • 52：直接选择
  • 54：矩形
  • 55：椭圆形
  • 57：线型工具
  • 56：参数化形状
  • 58：自定义形状
  • 59：手x型工具
  • 61：缩放工具

实时消息

参数说明

您可以将编辑器插入网页（使用框架）。 我们将此类网页称为外部环境（OE）。
OE可以通过Web消息与编辑器进行通信.

window.addEventListener("message", function(e) { alert(e.data); });
var wnd = document.getElementById("pp").contentWindow;
wnd.postMessage(msg, "*");

OE可以向编辑器发送两种数据：

  • 字符串 – 包含一个脚本，由编辑器执行
  • 数组缓冲区 – 二进制文件：psd，svg，jpg，…字体，画笔，……

当编辑器初始化并准备接受命令时，它会发送消息"done".
处理完信息后，编辑器也会回复信息"done".

从编辑器检索数据

编辑器可以使用以下命令将当前图像发送到OE（在脚本中）：

 

app.activeDocument.saveToOE("gif");

运行上面的脚本后，PP将发送一条带有GIF图像的ArrayBuffer的消息，然后发送一条带有”done”字符串的消息（处理脚本已完成）。

它也可以发送任意的字符串使用下面的命令（脚本内）到OE：

app.echoToOE("Hello");

用法示例

此API可以替换主API。 让编辑器直接与您的服务器通信的Instad，您可以在您的程序中加载文件，并在客户端设备中将它们传输到编辑器或从编辑器传输。
您可以将编辑器用作“模块”，隐藏其UI并仅使用消息传递。 您可以创建图像的批处理器（调整图像大小，添加水印，在格式之间进行转换）。 您可以创建脚本，将文档的每个图层导出为PNG。 您可以创建脚本，用来替换用户数据（创建名片生成器等）的每个文本层中的文本。

示例：自定义存储集成

我们可以重新定义文件的默认行为 – 打开和文件 – 保存。

  • 我们可以将任何图像作为ArrayBuffer发送消息到编辑器
  • 我们可以调用 app.activeDocument.saveToOE("psd"); 将当前文件发送到OE。
  • 我们可以调用 app.echoToOE("Hello"); 将任何字符串发送给OE。
  • 我们可以读取和写入 app.activeDocument.source 用于标识文件的字符串
  • 我们可以设置自定义脚本按打开或保存后运行： customIO : open, save

现在，我们可以做到以下几点：

  • 将自定义脚本设置为 app.echoToOE("Open" / "Save"); 当用户按下按钮时被通知。
  • 当用户想要打开文件时，向他显示您自己的文件输入（您甚至可以让用户绘制某些内容，或者为他拍照）。
  • 获得图像（ArrayBuffer）后，将其发送到Photopea并设置源：app.activeDocument.source="myID2353".
  • 当用户需要保存文件时，读取文件 (app.activeDocument.saveToOE("psd");) 及其来源
    app.echoToOE(app.activeDocument.source);,并将新版本保存到您的存储中。

插件

为编辑器创建插件，并通过配置JSON将其提供给用户。

{ "environment": {
	"plugins" : [ 
		{
			"name"  : "Wikipedia",
			"url"   : "https://en.wikipedia.org",
			"width" : 400,
			"height": 300,
			"icon"  : "https://en.wikipedia.org/static/favicon/wikipedia.ico"
		}
	]
} }
  • name – 插件名称
  • url – 插件URL
  • width – 插件宽度
  • height – 插件高度
  • icon – 插件图标（可选）

对于每个插件，该按钮将添加到当前按钮下方的右侧。

用户单击插件按钮后，面板将打开一个网站URL，其大小为宽度和高度。

用户可以将图像从您的网站拖放到编辑器（因为编辑器支持从任何网站删除图像，由浏览器打开）。

您的网站可以使用Live Messaging与您的编辑器连接（您的网站充当OE）。 它允许您的插件执行脚本（例如，更改前景色，移动图层等）。

该插件可以将文件提供给Photopea（图像：psd，jpg，svg …或资源：画笔，图案，字体……），或以特定格式请求当前文件。 所有这些都可以控制，例如 通过插件（网站）中的按钮。

window.parent.postMessage("...script...", "*");
window.parent.postMessage(ArrayBuffer, "*");

用法示例

照片存储：让用户浏览您的图像数据库。 他们可以通过关键字搜索数据库。 您可以在每个图像旁边添加一个“打开”按钮，这将在编辑器中打开该图像。

字体库：让用户浏览您的字体数据库。 单击按钮后将加载字体。 您也可以将支付网关集成到插件中（因为它是您的网站，您可以完全控制它）。

您可以使您的插件“商业化” – 让用户每月付费。 登录和付款界面仍然可以在插件的同一个“iframe”中，在编辑器中（或者您可以打开一个新窗口，然后返回到编辑器）。

演示

使用编辑器编辑本地图像

单击“编辑”以在编辑器中打开图像。 单击编辑器中的“文件” – “保存（到服务器）”以将其保存回来。

1554353200-5-1554353200.jpeg 编辑

Miranda_kerr.sketch编辑

Miranda_kerr.sketch编辑

Miranda_kerr.sketch编辑