Please support us by disabling ad blocker for smarttutorials.net ...

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.

  • Klaylton Fernando

    How do I add this editor in my wordpress blog through its API. Only available the editor for users to edit their photos freely. Already use it via iframes, but wanted to add it via the API.

    Note: Sorry for the mistakes, I’m from Brazil and I’m using Google translator.

  • Amie Richardson

    Hi, thanks for sharing your tutorial. Works as described. I was wondering if you could please share just how to open the program without having to open an image first?

    Also, because you have it opening in a pop-up window, when you close it, you have your webpage on top of your webpage. I used to have this setup on my website, but relocated it and apparently I didn’t save all the code. I can’t seem to get it to work (hence why I am here). I know I used the referrer and that I didn’t have to open it in a pop-up window. I also had this code (if it helps you):

    if(parent){

    parent.pixlr.overlay.hide();

    }

  • Mihai Fasola

    Hi, thanks for api, very usefull. I dont really understand where is saved image in web site tree or how to custom folder. Please if you can explain how to modify script? Thank you.

  • Josh Luplow

    Is there a way to put this inside another function to make part of a rightclick menu or something of that nature?

Get Instant Script Download Access!