šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

jquery.deviantartmuro is a jQuery plugin to provide a convenient wrapper around the embedding API for the deviantART muro HTML5 drawing application, allowing you to provide image drawing and editing within third-party sites.Embedding deviantART muro in your site allows you to pass images from your site to deviantART muro, allow your users to edit those images, and then hand the saved image data back to your site. You can also make scripted use of a number of deviantART muro tools such as filters.

HTML5 Other API Plugins

Documentation

jquery.deviantartmuro

jquery.deviantartmuro is a jQuery plugin to provide a convenient wrapper around the embedding API for the deviantART muro HTML5 drawing application, allowing you to provide image drawing and editing within third-party sites.

Embedding deviantART muro in your site allows you to pass images from your site to deviantART muro, allow your users to edit those images, and then hand the saved image data back to your site. You can also make scripted use of a number of deviantART muro tools such as filters.

For further documentation and examples, visit these pages:

Example

Using jquery.deviantartmuro is as simple as this code snippet:

// Embed deviantART muro within the element with id "damuro-goes-here". $('#damuro-goes-here').damuro({     // Say what image we want the user to embed.     background: '../images/crane_squared_by_mudimba_and_draweverywhere.png',     // We don't want to have deviantART muro load automatically.     autoload: false     })     // Bind a single-use onclick handler to open muro when they click on the splash screen     .one('click', function () { $(this).damuro().open(); })     // Chain down to the damuro object rather than $('#damuro-goes-here')     .damuro()     // The .damuro() object is a promise, so lets bind a done() and fail() handler.     .done(function (data) {             // Here's where you'd save the image, we'll just set the page background as an example             if (data.image && !/'/.test(data.image)) {                 $('body').css('backgroundImage', "url('" + data.image + "')");             }             $(this).hide().damuro().remove();         })     .fail(function (data) {             $(this).hide().damuro().remove();             if (data.error) {                 // Something failed in saving the image.                 $('body').append('<p>All aboard the fail whale: ' + data.error + '.</p>');             } else {                 // The user pressed "done" without making any changes.                 $('body').append("<p>Be that way then, don't edit anything.</p>");             }         });

To see a demo like this in action you can visit our home page.

Licenses

Please check the LICENSES.txt file for full details on the licensing, the quick synopsis is that image assets are provided under a Creative Commons Attribution License and the code snippets are under a BSD 3-Clause License.


You May Also Like