Passing data to Photopea

Photopea can be configured using a single GET parameter p having a string value.

https://www.photopea.com?p=STRING_VALUE

String value is encoded into the URL using classic encoding of query parameters (space as %20 etc.). It corresponds to encodeURI() in Javascript or urlencode() in PHP. This string contains a JSON object.

JSON configuration object

JSON object must have the following structure:

{
	"files" : [
		"https://www.mysite.com/images/design.psd",
		"https://www.mysite.com/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" : {
		"url" : "https://www.myserver.com/saveImage.php",
		"formats" : [ "psd", "png", "jpg:0.5" ]
	},
	"environment" : {
		"fcolor" : "0xff0000",   "bcolor" : "0x000000",     "rulers"  : true, 
		"compact" : true,        "theme"  : 2,              "lang"   : "es",   
		
		"localsave" : false,     "autosave"  : 120,         "showbranding": false,     
		"showtools" : [0,5,9],   "showmenus" : [ [0,1,3], 1, 0, 1, [0] ],
		"phrases"   : [ [1,0], "Open Design", [1,2], "Save Design" ]
	}
}

Data URIs can be used - file can be passed inside request (test).

Parameters

  • files (optional) - array of files, that are loaded when Photopea starts
  • resources (optional) - array of resources (gradients, brushes, fonts ...)
  • server (optional) - parameters for saving projects back to a server
    • url - URL address of a server
    • formats - formats, in which a project should be sent to a server. Quality (0 to 1) can be specified after the colon.
  • environment (optional) - parameters of the environment, each subparameter is optional
    • fcolor - foreground color
    • bcolor - background color
    • rulers - rulers enabled
    • compact - start in a compact view (panels on the right side will be collapsed)
    • theme - theme (0, 1, 2, ...)
    • lang - language
    • localsave - enable / disable "Save as PSD", "Save for Web" and "Publish Online"
    • autosave - with a value X, Photopea will execute "File - Save" each X seconds
    • showbranding - show / hide Log In, Social media links etc.
    • showtools - show only following tools (0: move, 1: rselect, 2: eselect, 5: lasso, 6: plasso, 7: mlasso, 9: mwand, 10: crop, 14: eyedropper, 23: brush, 27: clone, 31: eraser, 34: gradient, 35: pbucket, 47: htype, 59: hand, 61: zoom)
    • showmenus - specify the structure of File, Edit, Image ... menus. Each element of an array is either 0: hide the menu, 1: show the menu with all standard items, or an array of indices of items, that should be displayed. See the current menu structure of Photopea to get the right values. E.g. [0,1] as the first element means, that "File" menu will be shown with "New" and "Open" items only.
    • phrases - allows you to replace any phrase inside Photopea with your own. The aray has the form [ ID1, W1, ID2, W2, ... ], where IDx is the ID of some phrase and Wx is a new phrase, that should be used instead.
      Some useful IDs: [1,2]: Save (File menu), [2,0]: Step Forward, [2,1]: Step Backward. To discover IDs of other phrases, get familiar with OpenWord table structure and find your phrase in a current phrase database, or just write us an email to support@photopea.com.

Saving to server

When server parameter is specified in a request to Photopea.com, your project will get the File - Save (To Server) option. After a user clicks it, project data are sent to your server in HTTP request using POST method. It will contain a single string parameter p. The string contains a JSON object with the following structure:

{
	"source" : "https://www.mysite.com/images/button.png",
	"versions" : [
		{"format":"psd", "data": "..."},
		{"format":"jpg", "data": "..."},
		...
	]
}

Parameters

  • source - source URL of this project, that was passed in files array. Use it to identify your project.
  • versions different versions of your project
    • format - format of the file, exported from Photopea
    • data - binary data, encoded into a string using Base64 encoding

Here is a short PHP example, which accepts files from Photopea.

$p = json_decode( $_POST["p"] );	// parse JSON
// getting file name from "source";
$fname = substr ($p->source, strrpos($p->source,"/")+1);	
file_put_contents("images/".$fname, base64_decode( $p->versions[0]->data ));

Live demo

Cross-Origin Resource Sharing

For security reasons, webapps can access only files from the same domain. In order to let Photopea load your file, the response of your server must contain

Access-Control-Allow-Origin: *

in its HTTP header. Find out more at CORS specification or at enable-cors.org.

Prices

Usage of Photopea API is completely free. Keep in mind, that PP is in early stages of development and there may be critical bugs. We do not take any responsibility for projects edited or generated by Photopea.

Please, let us know in advance (support@photopea.com), when you expect to have a large regular traffic (thousands of visitors per day).