Integrate Pixlr Online Photo Editor in Web Application/Website

Posted 2:20 am by muni & 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 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'});
});

.