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 – 环境参数, 请参阅环境设置
  • scriptscript应该在加载每个文件后执行(可以很长)

保存到服务器

 

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编辑