1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...

How to Add Photoshop Like Image Editor to your Website

This guide shows you how to add a free image editor to your website, made in javascript, almost just as useful as photoshop, without need to download, just add these line to your site and get it working.

What do you need

Javascript code which you can download from here.

Screenshot of the Pixlr Editor

Screenshot of the Pixlr Editor

Access to your blog or website code.

For easier setup just use this file.

How to add the script to your website

Just use the above file and copy contents of index file to your file(page code) where link is required for the edit button.(recommended)

or

  1. Use the downloaded Javascript code, save it in your website directory.
  2. Add the following code to your php page

<script type=”text/javascript” src=”js/pixlr.js”></script>
<script type=”text/javascript”>
pixlr.settings.target = ‘http://justqna.com’; //replace with yoursite
pixlr.settings.exit = ‘http://justqna.com/’;//replace with yoursite
pixlr.settings.method = ‘GET’;
pixlr.settings.redirect = false;
//pixlr.settings.locktarget = true;

/*$(document).on(‘click’,’.edit_image’,function(){
img = $(this).data(‘src’);
pixlr.overlay.show({image:img, title:’Roof Crafters’});
});*/
</script>

  1. Just add this code where you want to insert the link.

<a href=”javascript:pixlr.overlay.show({image:’image-you-want‘, title:’Bootstrap Login Modal Popup’});”>
<img src=”image-you-want” 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>

Known Issues:edit-pencil-outline-in-circular-button-svg_-300x300

  • Image might not load on startup that you choose in the code
  • Saving to your site will have to be configured, you can do this by adding a php script, you can find it in the .zip file above.
  • Exit from X might not work
  • Window might not close properly.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *