Integrate Pixlr Online Photo Editor in Web Application/Website

Posted by & filed under Ajax, CakePHP, CSS, HTML5, JQUERY, PHP.

In this tutorial we are going to integrate pixlr online photo editor in our web application or website.

Pixlr is an free online photo editor tool, using this pixlr editor we can edit photos like in adobe photoshop. pixlr has almost same interface of photoshop, if you know photoshop little bit then it’s easy for you to edit photos in pixlr editor. So now we are going to add this excellent pixlr photo editor in our website.

 

Integrate-Pixlr-Online-Photo-Editor-in-Website

Integrate Pixlr Online Photo Editor in Web Application/Website

 

Add Pixlr Photo Editor to Web Application:

Download the source file source files using above download button and get the pixlr javascript libary. You may get this from pixlr site, but it has samll bug i.e. close button will not work when you close the pixlr editor. Better use my pixlr javascript libary to rectify above bug.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/pixlr.js"></script>

Configure Pixlr Photo Editor API:

<script type="text/javascript">
	pixlr.settings.target = 'http://localhost/pixlr-editor/save.php';
   	pixlr.settings.exit = 'http://localhost/pixlr-editor/pixlr.php';
   	pixlr.settings.method = 'GET';
   	pixlr.settings.redirect = false;
</script>

Please refer it official pixlr documentation for more options…

 

If you want to open a particular image in pixlr photo editor, we must pass image url and image title to pixlr API like in the below script.

<a href="javascript:pixlr.overlay.show({image:'http://4.bp.blogspot.com/-oJ98Ta02qro/VJWBER3fI9I/AAAAAAAADxo/YDOtgBvAn8s/s1600/jQuery-Autocomplete-Mutiple-Fields-Using-jQuery-Ajax-PHP-and-MySQL.png', title:'jQuery Autocomplete Mutiple Fields Using jQuery Ajax PHP and MySQL'});">
	<img src="http://4.bp.blogspot.com/-oJ98Ta02qro/VJWBER3fI9I/AAAAAAAADxo/YDOtgBvAn8s/s1600/jQuery-Autocomplete-Mutiple-Fields-Using-jQuery-Ajax-PHP-and-MySQL.png" class="img-responsive img-bottom-margin edit_image" title="Edit in pixlr" />
	<button class="btn btn-default btn-success text-center pull-center">Edit In Pixlr</button>
</a>

Now open the page in browser and click on the image, it will open in pixlr editor.

 

To apply image editing to all images in your webapplication, you must make this configuration as dynamic one using below jQuery script.

 

$(document).on('click','img',function(){
	img = $(this).data('src');
   	pixlr.overlay.show({image:img, title:'pixlr editor'});
});

.

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni[at]smarttutorials.net

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

Get Instant Script Download Access!