`
renzhen
  • 浏览: 250890 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多
       随着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>
    <!-- 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两部分
    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;}
    
分享到:
评论
2 楼 aqyzcs 2015-08-23  
你好,我想问一下,这个羽毛(Feather)图片编辑器里面自带的图案能够修改吗~
1 楼 su_yongzhen 2013-10-28  
你好,js代码里面的relativeToAbsoluteURL这个方法实现可以贴出来看看吗?谢谢

相关推荐

    最简单的网页编辑器

    了解并熟练掌握一个简单的网页编辑器是踏入网页制作领域的第一步,对于个人网站、博客、小型企业站点等场景非常实用。通过不断实践和学习,用户可以逐步提升网页设计和开发能力,进一步探索网页交互、动态功能等更...

    FCK富文本编辑器

    **FCK富文本编辑器详解** ...总的来说,FCKeditor是一个功能强大的富文本编辑器,它提供了丰富的编辑功能和高度的可定制性。对于Web开发者来说,正确地集成和配置FCKeditor,可以极大地提升用户在网页上的编辑体验。

    富客户端编辑器ckeditor与ckfinder结合

    CKFinder则是一个配套的文件管理器,主要用于处理CKEditor中插入的图片、文件等资源的上传、管理和删除。将这两者结合使用,可以构建一个强大的内容管理系统,尤其适用于需要用户编辑和发布包含多媒体元素的文章或...

    CKEditor4富文本编辑器

    总之,CKEditor4是一个强大且灵活的富文本编辑器,它为网页内容创作提供了便捷的工具,同时也为开发者提供了丰富的定制选项和API,以满足各种项目需求。无论是对于普通用户还是开发者,CKEditor4都是一个值得信赖的...

    PhpSay 可视化编辑器 v1.6.2-源码.zip

    在 v1.6.2 版本中,该编辑器已经具备了相当成熟的功能,并且提供了丰富的自定义选项,使得开发者可以按照自己的需求进行定制。源码的学习对于提升 PHP 开发技能、理解 Web 编辑器的工作原理以及进行二次开发具有重大...

    thinkphp3.2嵌入百度编辑器ueditor的实例代码

    而百度编辑器UEditor是一个为满足各种复杂应用场景需求,提供强大功能与易用性的在线Web编辑器。它支持自定义配置,可扩展性强,并且拥有丰富的配置项和接口,是开发中常用的富文本编辑器之一。 当我们在ThinkPHP...

    jsp程序中使用fckeditor编辑器

    4. **创建编辑器实例**:在JSP页面的HTML部分,你需要为FCKeditor指定一个ID和宽度、高度,然后通过JavaScript调用`FCKeditor.Create()`方法创建编辑器实例。例如: ```html ;height:500px;"&gt; var oFCKeditor =...

    在Dreamweaver(DM)中创建jsp站点+Tomcat服务器整理.pdf

    本篇主要介绍如何在Dreamweaver中创建一个JSP站点,并与Tomcat服务器进行集成。 首先,我们要理解JSP(JavaServer Pages)是一种动态网页技术,它允许开发者在HTML页面中嵌入Java代码,以实现服务器端的逻辑处理。...

    EclipseHTMLEditor和StrustIDE插件

    Eclipse作为一个强大的集成开发环境(IDE),为Java开发者提供了丰富的功能和扩展支持。在处理Web应用,特别是基于Struts框架的项目时,EclipseHTMLEditor和StrutsIDE插件是两个非常重要的辅助工具,它们极大地提升...

    SharePoint 的 Web Parts 是什么

    - **添加Web部件**:在完成页面布局的Section后,点击页面布局上的X号,会弹出一个小窗口,在这个窗口中可以选择并添加所需的Web部件。 - **编辑Web部件**:选中某个Web部件后,通常可以通过右键菜单或工具栏选项对...

    开源:VB编写的桌面级WEB服务器

    这是一款桌面级的WEB服务器 包含一个静态的http服务器与一个js脚本引擎 可以展示静态的网页与生成简单的动态页面 适合个人在windows服务器上面简单的建立http服务 支持情况: 静态http session application(仅仅...

    ASP下使用FCKeditor在线编辑器的方法

    该编辑器具有多语言支持,并且作为开源软件,用户可以免费使用和修改源代码。 2. 测试环境配置: 使用FCKeditor之前,需要配置合适的测试环境。文档中提到的测试环境是XP SP2操作系统,IIS 5.1作为Web服务器,并且...

    Beginning ASP.NET Web Pages with WebMatrix

    ### ASP.NET Web Pages with WebMatrix 知识点详解 #### 一、概述 《Beginning ASP.NET Web Pages with WebMatrix...无论是对网页设计感兴趣的学生还是想要扩展自己技能集的专业人士,这本书都是一个非常宝贵的资源。

    CuteEditor

    通过参照这个文件,开发者可以了解如何在自己的页面中嵌入编辑器,以及如何处理编辑器生成的内容。 Feature-Comparison-Chart.htm和Competitive_Upgrade.htm这两个文件可能包含了CuteEditor与其他在线编辑器的特性...

    如何用VS2005制作Web安装程序

    - 使用“用户界面编辑器”添加用户交互界面元素,如文本框供用户输入数据库连接信息或站点端口等。 5. **添加自定义操作**: - 在“自定义操作”面板中,可以添加各种自定义操作步骤,如创建新的IIS网站、执行SQL...

    web界面设计

    - **应用场景**:文档编辑器中的拼写检查、代码编辑器中的语法提示等。 - **优势**:简化操作流程,提升工作效率。 5. **覆盖层**(第5章) - **原理概述**:在现有页面上覆盖一层新的界面,用于展示更多信息或...

    Dialog 畫面顯示 Web 畫面, 可輸入網址

    在这种特定情况下,我们讨论的是一个能够显示Web页面并允许用户输入网址的Dialog窗口,这在Win32应用程序中实现。下面将详细解释如何在Win32程序中创建这样的功能。 首先,你需要了解基本的Win32 API,它是Windows...

    ASP.NET源码——[博客空间]简单实用的个人Blog站点.zip

    在 Blog 系统中,每个博客文章可以视为一个模型,控制器处理用户的操作如查看、编辑、删除文章,并将这些操作的结果传递给视图进行显示。 3. **用户认证与授权**:ASP.NET 提供了内置的身份验证和授权机制,如 ...

    Django Web开发指南

    5. **管理站点(Admin Site)**:Django 自带了一个强大的管理界面,可以帮助开发者轻松地管理和编辑数据。 #### 三、Django 的安装与配置 - **环境准备**:确保已安装 Python 和必要的依赖库。 - **创建项目**:...

    Telerik RadEditorMOSS 5.5 (2009年7月7日版本)

    Telerik RadEditorMOSS 是一个专为Microsoft SharePoint设计的高级网页编辑器,由Telerik公司开发。这个5.5版本发布于2009年7月7日,它提供了一系列增强的内容创作和管理功能,旨在提升SharePoint站点的用户体验和...

Global site tag (gtag.js) - Google Analytics