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.
");}
});
相关链接