自分のWebサイトに無料の画像エディタを埋め込む
Open api運動の流行と深化に伴い、自分で開発する必要がある多くの機能は、Google、baiduを通じてサイト内検索を実現し、bshareを使ってSNS機能に参加するなど、他人のインタフェースを呼び出すことで実現することができます.Webピクチャエディタでも、他人のインタフェースを呼び出すことで実現できるようになりました.
Aviaryは埋め込み可能なHTML 5ピクチャエディタを発表し、「羽毛(Feather)」と呼ばれています.このピクチャエディタと美図秀秀などの最大の違いは、独立したアプリケーションではなく、JSインタフェースを通じて、ピクチャエディタをWebのWebシステムにロードすることです.あなたのページから離れていませんが、最も重要なのはこのサービスです.
完全無料です.ドキドキしましたか?心が動くよりもすぐに行動し、
http://www.aviary.com/webにはシステムの完全な紹介とドキュメントがあり、code generator(コード生成)もあるので、詳しく説明しません.以下、実用的なテクニックについてお話しします.
1.languageパラメータでエディタに中国語をサポート
デフォルトで表示されるエディタは英語で、中国語を表示する場合はパラメータにlanguage:zh_を追加できます.HANS(簡体字中国語)またはlanguage:zh_HANT(繁体字中国語)、詳細な言語リストは以下を参照できます.
http://www.aviary.com/web-documentation#constructor-config-language
2.iframeでピクチャエディタを呼び出すことで、非同期オンデマンドロードを実現
まずaviaryサービスのjsロードが遅い場合があります.特に国内では、直接システムで呼び出すとWebシステム自体のロード速度が遅くなり、ユーザーがエディタを使用していないときにロード自体もリソースを浪費する可能性があります.
解決策は、画像エディタにhtmlを単独で書くことで、Webシステムはjquery dialogやthickboxなどのダイアログボックスにiframeでこの画像エディタhtmlを埋め込むことで、もちろん簡単なダイアログ機能を実現することができます.私はこのようにして、jsとiframe通信を通じて画像エディタ機能を実現します.
これを行うには、元のピクチャエディタの閉じるボタンを隠すことで、パラメータnoCloseButton:trueを加えることで実現できます.
上記の説明に従って、私は自分でカプセル化した簡単なピクチャエディタコードを開いて、参考にします.
iframe埋め込みピクチャエディタコード
自分で書いた簡単なダイアログボックスで、jsとcssの2つの部分が含まれています.
jsセクション:
ダイアログのcssセクションは次のとおりです.
Aviaryは埋め込み可能なHTML 5ピクチャエディタを発表し、「羽毛(Feather)」と呼ばれています.このピクチャエディタと美図秀秀などの最大の違いは、独立したアプリケーションではなく、JSインタフェースを通じて、ピクチャエディタをWebのWebシステムにロードすることです.あなたのページから離れていませんが、最も重要なのはこのサービスです.
完全無料です.ドキドキしましたか?心が動くよりもすぐに行動し、
http://www.aviary.com/webにはシステムの完全な紹介とドキュメントがあり、code generator(コード生成)もあるので、詳しく説明しません.以下、実用的なテクニックについてお話しします.
1.languageパラメータでエディタに中国語をサポート
デフォルトで表示されるエディタは英語で、中国語を表示する場合はパラメータにlanguage:zh_を追加できます.HANS(簡体字中国語)またはlanguage:zh_HANT(繁体字中国語)、詳細な言語リストは以下を参照できます.
http://www.aviary.com/web-documentation#constructor-config-language
2.iframeでピクチャエディタを呼び出すことで、非同期オンデマンドロードを実現
まずaviaryサービスのjsロードが遅い場合があります.特に国内では、直接システムで呼び出すとWebシステム自体のロード速度が遅くなり、ユーザーがエディタを使用していないときにロード自体もリソースを浪費する可能性があります.
解決策は、画像エディタにhtmlを単独で書くことで、Webシステムはjquery dialogやthickboxなどのダイアログボックスにiframeでこの画像エディタhtmlを埋め込むことで、もちろん簡単なダイアログ機能を実現することができます.私はこのようにして、jsとiframe通信を通じて画像エディタ機能を実現します.
これを行うには、元のピクチャエディタの閉じるボタンを隠すことで、パラメータnoCloseButton:trueを加えることで実現できます.
上記の説明に従って、私は自分でカプセル化した簡単なピクチャエディタコードを開いて、参考にします.
iframe埋め込みピクチャエディタコード
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" value="IE=9" />
<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script>
<script type="text/javascript" src="script/jquery-1.6.4.js"></script>
<!-- Instantiate Feather -->
<script type="text/javascript">
var featherEditor = new Aviary.Feather({
apiKey: '',
apiVersion: 2,
tools: ['crop', 'resize', 'orientation', 'text', 'draw', 'contrast', 'brightness', 'saturation', 'sharpness', 'enhance', 'effects', 'redeye', 'whiten', 'blemish', 'stickers'],
appendTo: 'injection_site',
language : DIALOG.lang,
noCloseButton:true,
maxSize : 2000,
onSave: function(imageID, newURL){
var jsonObj =DIALOG.jsonObj;
DIALOG.setLoading(true);
$.post(parent.parseToURL('pic','download'),{"file_url": encodeURIComponent(newURL)},function(json){
var response = $.parseJSON(json);
if (response.result == "OK") {
jsonObj.callback(response.fname,response.width,response.height);
}
DIALOG.close();
}).error(function(){
DIALOG.close();
});
}
});
function initialize(){
var jsonObj =DIALOG.jsonObj;
// var url="http://www.baidu.com/img/baidu_sylogo1.gif";
var url=jsonObj.url;
$("#image").load(function(){
setTimeout(function(){
featherEditor.launch({
image : 'image',
url : url
});
DIALOG.setLoading(false);
},1000);
}).attr('src', url);
}
</script>
</head>
<body>
<img id="image" src="" style='display:none;' />
<div id="injection_site"></div>
<style type='text/css'>
body, body.application{overflow:hidden; }
#avpw_controls{
-webkit-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
-ms-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
}
</style>
</body>
</html>
自分で書いた簡単なダイアログボックスで、jsとcssの2つの部分が含まれています.
jsセクション:
function wp_editPicOnlineActual(param)
{
var jsonObj = param || {};
var DIALOG={};
DIALOG.jsonObj=jsonObj;
DIALOG.lang='zh_HANS';
var dialog='<div id="sys_dialog_aviary" class="application dialog" style="height: 428px; top: 27px; left: 45px;opacity: 1; display: block; z-index: 3000; "><div class="close" style="display: block; "><span>x</span></div><table cellpadding="0" cellspacing="0" class="outer_wrap_table"><tbody><tr><td colspan="3"><div class="space"></div></td></tr><tr><td><div class="space"></div></td><td style="width:100%;height:100%;"><table cellpadding="0" cellspacing="0" class="wrap_table" style="display: table; "><tbody><tr><td class="wrap_td"><div class="loading"><table cellpadding="0" cellspacing="0"><tbody><tr><td><span>loading...</span></td></tr></tbody></table></div><iframe id="sys_dialog_iframe_aviary" frameborder="0" style="display: block; " src="'+relativeToAbsoluteURL('aviary_dialog.php')+'"></iframe></td></tr></tbody></table></td><td><div class="space"></div></td></tr><tr><td colspan="3"><div class="space"></div></td></tr></tbody></table></div>';
$(dialog).appendTo('body');
var ols = '<div id="wp-dialog_aviary" style="z-index:2999;"></div>';
$(ols).appendTo('body');
function dialog_pos(){
var dialog=$('#sys_dialog_aviary');
dialog.width($(window).width()-90).css('left','45px');
$('#wp-dialog_aviary').width($(window).width()).height($(window).height());
var topval=($(window).height()-dialog.height())/2;
if(topval<0) topval=0;
dialog.css('top',topval);
if($.browser.msie){
var height=dialog.height()-30;
if($.browser.version < 9) $('#sys_dialog_aviary .close').addClass('ie_close');
$('#sys_dialog_aviary .outer_wrap_table').css('height',height);
}
}
dialog_pos();
$(window).bind('resize.aviary',function(){
dialog_pos();
})
DIALOG.close=function(){
$('#sys_dialog_aviary').remove();
$('#wp-dialog_aviary').remove();
$(window).unbind('.aviary');
}
DIALOG.setLoading=function(isexist){
if(isexist){
$('#sys_dialog_aviary .loading').show();
}else{
$('#sys_dialog_aviary .loading').hide();
}
}
var iframewindow=$('#sys_dialog_iframe_aviary')[0].contentWindow;
iframewindow.DIALOG=DIALOG;
$(iframewindow).bind('load',function(){
iframewindow.initialize();
})
$('#sys_dialog_aviary .close').click(function(){
DIALOG.close();
})
}
ダイアログのcssセクションは次のとおりです.
div#sys_dialog_aviary {-webkit-border-radius: 8px;-khtml-border-radius: 8px;-moz-border-radius: 8px;-ms-border-radius: 8px;-o-border-radius: 8px;border-radius: 8px;background: white;-webkit-box-shadow: 1px 1px 15px #333;-khtml-box-shadow: 1px 1px 15px #333;-moz-box-shadow: 1px 1px 15px #333;-ms-box-shadow: 1px 1px 15px #333;-o-box-shadow: 1px 1px 15px #333;box-shadow: 1px 1px 15px #333;position: absolute;top: 0;left: 0;}
div#sys_dialog_aviary td.wrap_td {height: 100%;}
div#sys_dialog_aviary div.loading table td {vertical-align: center;text-align: center;}
div#sys_dialog_aviary iframe {border: none;width: 100%;height: 100%;display: block;}
div#sys_dialog_aviary table.wrap_table {width: 100%;height: 100%;}
div#sys_dialog_aviary div.loading table {width: 100%;height: 100%;}
div#sys_dialog_aviary table.outer_wrap_table {width: 100%;height: 100%;}
div#sys_dialog_aviary div.loading {background: white;-webkit-border-radius: 60px;-khtml-border-radius: 60px;-moz-border-radius: 60px;-ms-border-radius: 60px;-o-border-radius: 60px;border-radius: 60px;position: absolute;width: 100%;height: 100%;left: 0;top: 0;}
div#sys_dialog_aviary div.loading span {background: url(../images/loading.gif) top left no-repeat;padding: 6px 0 15px 41px;display: inline-block;margin: auto auto;font-size: 12px;color: #888;}
#wp-dialog_aviary {background-color:#000;left:0px;top:0px;filter:alpha(opacity=25);-moz-opacity:0.25;opacity:0.25;position:fixed;}
div#sys_dialog_aviary div.space {width: 15px;height: 15px;font-size: 0;}
div#sys_dialog_aviary div.close {
-webkit-box-shadow: 1px 1px 5px #111;
-khtml-box-shadow: 1px 1px 5px #111;
-moz-box-shadow: 1px 1px 5px #111;
-ms-box-shadow: 1px 1px 5px #111;
-o-box-shadow: 1px 1px 5px #111;
box-shadow: 1px 1px 5px #111;
-webkit-border-radius: 50px;
-khtml-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
position: absolute;
top: -15px;
right: -15px;
width: 26px;
height: 26px;
color: white;
border: 3px solid white;
background: #111;
z-index: 999;
cursor: pointer;
line-height: 0;
}
div#sys_dialog_aviary div.ie_close{
top: -23px;
right: -23px ;
width: 42px ;
height: 42px;
border: none;
background: transparent url(../images/aviary_close.png) top left no-repeat;
}
div#sys_dialog_aviary div.close span {
font-family: Verdana,Arial,Helvetica,sans-serif;
padding: 11px 0 0 0;
text-align: center;
font-weight: bold;
line-height: 0;
font-size: 14px;
display: block;
}
div#sys_dialog_aviary div.ie_close span {display: none;}