jquery.deviantartmuro

jQuery plugin for embedding the HTML5 drawing app, deviantART muro, on your site.

Download .zip Download .tar.gz View on GitHub

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.

Example Source

$('#damuro-goes-here').damuro({
    // Say what image we want the user to embed.
    background:  'images/crane_squared_by_mudimba_and_draweverywhere.png',
    // Locate a sandbox to quarantine third-party javascript in.
    sandbox:     'html/deviantart_muro_sandbox.html',
    // Set a custom loading screen message.
    loadingText: 'This is a customized loading message...',
    // Make the "click to play" splash screen have a funky colour.
    splashCss: {
        color: '#33a'
        },
    // 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) {
            if (data.image && !/\'/.test(data.image)) {
                // Here's where you'd save the image, we'll just set the header background as an example.
                $('.inner').css('backgroundImage', "url('" + data.image + "')");
                // And scroll to the top so you see it.
                $('html, body').animate({
                    scrollTop: $('.inner').offset().top
                    }, 200);
            }
            // And remove deviantART muro from the page.
            $(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>");
            }
        });

Documentation

The documentation is maintained within the GitHib wiki:

If you're interested in the underlying deviantART muro API, it has its own wiki too:

Release status

This code is currently considered pre-alpha and a work-in-progress intended for third-party developer early access and feedback. The underlying deviantART muro API and example code are currently in a state of flux and subject to breakage without notice, although the jQuery plugin endeavours to provide a stable programatic interface to that underlying API.

We will update this status message and tag a release as and when this status changes.

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.