A new way to use deviantART muro
The deviantART muro team have been beavering away for a little while on a new feature for third-party developers, and today we're pleased to reveal that deviantART muro now has a third-party embedding API.
What does this mean?
In simple terms it means that with a small amount of JavaScript code, you can bring the power of deviantART muro to your website, allowing your visitors to draw or edit images anywhere you like.
To make life easier for you there's a jQuery binding for the API, or a raw HTML/JavaScript example if you prefer to work more directly or use a different framework. There's also a WordPress plugin that can be used as an example of what can be done, or use on your blog if it's run on WordPress.
The jQuery plugin
Using the jQuery plugin is the easiest way to embed deviantART muro in your site, this quick snippet of JavaScript is an example of how little is involved in hooking up to deviantART muro to edit an image and receive the edited image back:
// 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>Sorry, something broke: ' + data.error + '.</p>');
} else {
// The user pressed "done" without making any changes.
$('body').append("<p>Be that way then, don't edit anything.</p>");
}
});
If you want to see an example like this in action, take a look at the examples page.
The jQuery plugin also provides a convenient interface to the command API, allowing you to send commands to an embedded deviantART muro, the range of commands is currently fairly limited but it does allow you to apply filters or import new images into layers:
$('#damuro-goes-here').damuro().command('filter', {
filter: 'Sobel',
layer: 'Background'
})
.promise()
.done(function (data) {
alert("The filter was applied.");
})
.fail(function (data) {
alert("There was an error applying the filter: " + data.error);
});
Raw HTML/JavaScript examples
The jQuery plugin is the recommended way to use the deviantART muro API, but if you don't or can't use jQuery, you'll probably find the Raw HTML/JavaScript reference implementation to be useful, it has no external dependencies and can either be copied directly or used as the basis to write a plugin for the JavaScript framework of your choice.
The interface is less friendly: you'll need to send messages via postMessage() directly and implement your own secure event listener to receive the messages back and take care of setup and teardown yourself.
If you do use this example code to write your own JavaScript framework plugin, please let us know so we can give you a shout out and link to you.
deviantART muro WordPress plugin
If you're stumped for ideas or just want to add deviantART muro to your WordPress blog then the deviantART muro WordPress plugin is for you.
It hooks into WordPress in three places:
- The Media Library - Now you can draw items directly into your WordPress Media Library.
- Comments - You can enable deviantART muro in comments, allowing your site visitors to post images with their comments. You can configure moderation independently of text-only comments if you're not too keen on trusting the internet-at-large with uploading images to your blog.
- Article shortcodes - You can embed an instance of deviantART muro within any article using a [damuro background='filename.jpg'] shortcode, this allows visitors to draw on an image of your choosing and post the result as a comment. How you use this is up to you, but you could use it to ask for critiques on your work or just to run competitions with a starting background.
Licensing and where to get it
All the code in these plugins is open-source under a standard BSD 3-Clause license, the image assets are under a Creative Commons Attribution 3.0 License.
You can find the latest version of all this code in our GitHub repository, or if you prefer you can fetch the latest stable releases from the jQuery plugins site and the WordPress plugins site.
Please note that the open-source license only applies to the plugin code provided on GitHub, not to the core deviantART muro code running on Sta.sh, that remains copyrighted and is the property of deviantART.