html5简单绘图程序,jQuery+HTML5的绘图应用程序

query.deviantartmuro是一个jQuery插件，允许您在网站上进行图像绘制和编辑，并保存图片。

使用很简单

$('#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('

All aboard the fail whale: ' + data.error + '.

');

} else {

// The user pressed "done" without making any changes.

$('body').append("

Be that way then, don't edit anything.

");

}

});

相关链接