自分の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埋め込みピクチャエディタコード
      

  <!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;}