Preivew user design projects

In this demo, we grab the current user's designs and list them

require('{PATH_TO_PHP_LIBRARY}');	
$client = new DesignStudioPlatform\API('Your App ID','Your API Key');



<style>
	.row{
	display:flex;
	flex-wrap: wrap;
	}
	.row > .item{
	 flex: 0 0 auto;
	 width: 25%
	}
	.card{
	background-color: white;
	position: relative;
	}
	.card-body {
	padding: 1.5rem;
	}
	
</style>
<div class="row"></div>

const containter = document.querySelector('.row');
	DesignStudioPlatform.getProjects(userid).then(function(response){
		for(i=0; response.result.items.length > i;i++){
			var col = document.createElement('div');
			var item = response.result.items[i];
			col.classList.add('item');
			col.innerHTML += '<div class="card">';	
			//Append preview image
			col.innerHTML += '<img class="card-img-top" src="'+item.preview+'" />';	
			col.innerHTML += '<div class="card-body"><h5>'+item.title+'</h5>';
			col.innerHTML += '<a href="#'+item.id+'" class="btn btn-primary">Download</a>';
			col.innerHTML += '</div></div>';
			col.appendTo(containter);
			//Handle the download button click action
			col.querySelector('a.btn').addEventLister('click',function(e){
				//Retrive Id
				var id = this.getAttribute('href').substr(1);
				//Render design to PNG format
				DesignStudioPlatform.exportProject(id,'png').then(function(result){
					//Save file to user disk
					if(result.download){
						location.href = result.download;
					}
				});
			})
		}
		
	})

Save project info to database

We demomstrate how to launch the editor, retrieve user's finished work and save it on the server

	
//Allow wbesite user to create page cover of a specific dimension
const coversize = '820x312';
DesignStudioPlatform.logInEditor(userid,{'size':coversize}).then(function(response){
	//Make sure we are gettig the expected dimension;
	if(response.result.size !==size){
	alert('Cover design must be of dimension '+coversize);
	return;
	}
	//Send info to server using Ajax
	let info = {'user_id':userid,'designID':response.result.id};
	xhr = new XMLHttpRequest();
	xhr.open('POST',location.href);
	xhr.send(new URLSearchParams(info))
})

Export design and save to server

This demo shows how to export design to image format and save on th server for further use

	
//Retrieve and export design to JPG
$designID = $_POST['designID'];
$callbackURL = 'URL GOES HERE';// 
//Retrieve project info;
//Prepare to export to JPG format
	try{
$response = $client->call('project/export/'.$designID,array(
'format'=>'jpg',
'callback'=>$callbackURL, /** We provide callback url in case the operation is queued **/
));
	if(isset($response->body['download'])){
	//Rendering is complete and download is available
		$fp = fopen($response->body['download']['url'],'r');
		$newfile = 'Folder/filename.'.$response->body['download']['extension']; //This is where we put the new file
		if(!$fp)throw new exception('Cannot open file for download');
		$fpout = fopen($newfile,'wb');
		//Start download
		while(!feof($fp)){
			$out = fread($fp,4194304);
			fwrite($fpout,$out);
		}
		//File successfully saved to server
		fclose($fp);
		fclose($fpout);
	}
	}catch(Exception $e){
		throw new exception('Could not export project');
	}

In case the process is queued, Learn how to process callback response here

Instantly generate mockup

This demo shows how to generate a product box on the fly

	

$callbackURL = 'URL GOES HERE';// 
$coverDesign = 'IMAGE PATH HERE';
//Prepare to generate a product box
	try{
$response = $client->call('packages/create/product-box',array(
'width'=>500,
'image'=>$client->files($coverDesign),
'callback'=>$callbackURL, /** We provide callback url in case the operation is queued **/
));
	if(isset($response->body['download'])){
	//Rendering is complete and download is available
		$fp = fopen($response->body['download'][0]['url'],'r');
		$newfile = 'Folder/filename.'.$response->body['download'][0]['extension']; //This is where we put the new file
		if(!$fp)throw new exception('Cannot open file for download');
		$fpout = fopen($newfile,'wb');
		//Start download
		while(!feof($fp)){
			$out = fread($fp,4194304);
			fwrite($fpout,$out);
		}
		//File successfully saved to server
		fclose($fp);
		fclose($fpout);
	}
	}catch(Exception $e){
		throw new exception('Could not create mockup');
	}

In case the process is queued, Learn how to process callback response here

Batch edit photos

We show how to resize, sharpen and convert multiple photos

	

$callbackURL = 'URL GOES HERE';// 
$images = glob('IMAGE FOLDER/*.{jpg,png,svg}');
//Prepare to generate a product box
	try{
$response = $client->call('photo/adjust',array(
'options'=>array(
		'sharpen'=>10,
		'resize'=>'150x150'
	),
'format'=>'jpg',
'images'=>$client->files($images),
'callback'=>$callbackURL, /** We provide callback url in case the operation is queued **/
));
	if(isset($response->body['download'])){
	//Rendering is complete and download is available
		foreach($response->body['download'] as $i=>$item){
			$fp = fopen($item['url'],'r');
			$newfile = 'Folder/filename-'.$i.'.'.$item['extension']; //This is where we put the new file
			if(!$fp)continue;
			$fpout = fopen($newfile,'wb');
			//Start download
			while(!feof($fp)){
			$out = fread($fp,4194304);
			fwrite($fpout,$out);
			}
			fclose($fp);
			fclose($fpout);
		}
		//Files successfully saved to server
	}
	}catch(Exception $e){
		throw new exception('Could not create mockup');
	}

In case the process is queued, Learn how to process callback response here

Generate blurred photo thumbnail

Here we demonstrate how to generate blurred photo thumbnails. Useful for image preloader

	

$callbackURL = 'URL GOES HERE';// 
$images = glob('IMAGE FOLDER/*.{jpg,png,svg}');
//Prepare to generate a product box
	try{
$response = $client->call('packages/create/blurimage',array(
'images'=>$client->files($images),
'callback'=>$callbackURL, /** We provide callback url in case the operation is queued **/
));
	if(isset($response->body['download'])){
	//Rendering is complete and download is available
		foreach($response->body['download'] as $i=>$item){
			$fp = fopen($item['url'],'r');
			$newfile = 'Folder/filename-'.$i.'.'.$item['extension']; //This is where we put the new file
			if(!$fp)continue;
			$fpout = fopen($newfile,'wb');
			//Start download
			while(!feof($fp)){
			$out = fread($fp,4194304);
			fwrite($fpout,$out);
			}
			fclose($fp);
			fclose($fpout);
		}
		//Files successfully saved to server
	}
	}catch(Exception $e){
		throw new exception('Could not create mockup');
	}

In case the process is queued, Learn how to process callback response here

Quick templating hack

Here we demonstrate how to use saved project as a template to export new designs

	

$callbackURL = 'URL GOES HERE';// 
$photo = 'NEW IMAGE SOURCE HERE';
$projectId = 'SAVED PROJECT ID HERE';
$name = 'photo'; //Name of the layer to replace on the project
	try{
$response = $client->call('project/export/'.$projectId,array(
'format'=>'jpg',
'prefill'=>array(
  $name=>$client->files($photo)
),
'callback'=>$callbackURL, /** We provide callback url in case the operation is queued **/
));
	if(isset($response->body['download'])){
	//Rendering is complete and download is available
			$fp = fopen($response->body['download']['url'],'r');
			$newfile = 'Folder/filename-'.$i.'.'.$response->body['download']['extension']; //This is where we put the new file
			if(!$fp)throw new exception('Cannot open file for download');
			$fpout = fopen($newfile,'wb');
			//Start download
			while(!feof($fp)){
			$out = fread($fp,4194304);
			fwrite($fpout,$out);
			}
			fclose($fp);
			fclose($fpout);
		//Files successfully saved to server
	}
	}catch(Exception $e){
		throw new exception('Could not create mockup');
	}

In case the process is queued, Learn how to process callback response here