给自己的Web站点嵌入一个免费的图片编辑器

renzhen · 发表于 2013-1-29 13:40:05

随着open api运动的流行和深入，很多原本需要自己开发的功能都可以通过调用他人的接口来实现，比如：通过google、baidu实现站内搜索，使用bshare加入SNS功能等等。现在就连Web图片编辑器也可以通过调用他人的接口来实现了。
   Aviary发布可嵌入式HTML5图片编辑器，名为“羽毛（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>  <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两部分
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;}

		自动登录	找回密码
密码			立即注册