Shop Forum More Submit  Join Login
About Deviant Senior Member SamMale/United Kingdom Recent Activity
Deviant for 8 Years
Core Member 'til Hell freezes over
Statistics 14 Deviations 218 Comments 63,649 Pageviews

Newest Deviations

These Tired Feet by sgrahamUK These Tired Feet :iconsgrahamuk:sgrahamUK 1 0 Worse days to be alive by sgrahamUK Worse days to be alive :iconsgrahamuk:sgrahamUK 5 2 Isambard by sgrahamUK Isambard :iconsgrahamuk:sgrahamUK 4 0 Bug Buddies by sgrahamUK Bug Buddies :iconsgrahamuk:sgrahamUK 1 2 Rainy Day by sgrahamUK Rainy Day :iconsgrahamuk:sgrahamUK 3 0 The Time of Horses by sgrahamUK The Time of Horses :iconsgrahamuk:sgrahamUK 1 1 A Grungy Alt Grrl by sgrahamUK A Grungy Alt Grrl :iconsgrahamuk:sgrahamUK 0 0 Desk Of Overkill by sgrahamUK Desk Of Overkill :iconsgrahamuk:sgrahamUK 0 2 Distrust by sgrahamUK Distrust :iconsgrahamuk:sgrahamUK 0 1 Yum yum pondweed by sgrahamUK Yum yum pondweed :iconsgrahamuk:sgrahamUK 3 0 Pitch Invasion by sgrahamUK Pitch Invasion :iconsgrahamuk:sgrahamUK 2 0


Thing thing...

...tha thing thing, thing tha thing tha thing.


Once upon a time... 

40 deviants said They all died in freak boating accident.
23 deviants said They lived happily ever after.
11 deviants said He won the girl and lost the girl.


United Kingdom
Current Residence: Bristol, UK
Favourite genre of music: Industrial/Synthpop
Operating System: Linux
MP3 player of choice: Creative Muvo
Shell of choice: bash
Wallpaper of choice: Hubble NGC 3324


Embedding deviantART muro

Tue Feb 12, 2013, 8:26 AM

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".
   // 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')
   // 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 + "')");
   .fail(function (data) {
           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'
   .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, that remains copyrighted and is the property of deviantART.


Add a Comment:
specialized666 Featured By Owner Aug 9, 2018  Professional Interface Designer
Hi, have an awesome day :happybounce:
QueenCordite Featured By Owner Mar 7, 2018   Digital Artist
Sam you legend! Thank you for the core membership! :hug:
QueenCordite Featured By Owner Dec 8, 2016   Digital Artist

sgrahamUK Featured By Owner Dec 9, 2016
The Encheesening begins.
QueenCordite Featured By Owner Dec 10, 2016   Digital Artist
BEFORE THE CHEESE The Cutest Cheese Ever 
BijancaParis Featured By Owner Aug 7, 2015  Hobbyist Traditional Artist
Dude, I love your profile pic.
DEVlANT Featured By Owner Jul 22, 2015  Student Artist
MidnightExigent Featured By Owner Jul 21, 2015  Hobbyist Digital Artist
Rhyn-Art Featured By Owner Mar 13, 2015   General Artist
sgrahamUK Featured By Owner Mar 23, 2015
Hola! (belatedly)
Add a Comment: