本例以web调用做为例子，本插件支持主流浏览器，IE要9以上，移动设备，触屏设备也支持，能自适应屏幕大小。
使用效果：
工具还是很丰富的，编辑完成之后，可以保存图片至本地目录。
使用说明：
1，需要在线注册账号，申请apikey，地址：https://creativesdk.adobe.com/docs/web，这个apikey在代码调用时需要。这里也有详细的api文档，其他功能请参考文档说明，不过文档是英文的。
2，要编辑的图片必须有固定的地址，可以被网络访问到。
示例源代码，以web调用为例：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>汽车图片编辑</title> <%-- <script src="js/CarPhotoEdit.js"></script>--%> <script src="../Scripts/jquery-1.7.1.js"></script> <script src="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script> <script type='text/javascript'> //在线编辑图片功能，第三方插件，完全免费 var featherEditor = new Aviary.Feather({ apiKey: 'wanghuifang2008@yeah.net',//apikey可以免费申请，https://creativesdk.adobe.com/docs/web/#/index.html apiVersion: 3, theme: 'dark', // Check out our new 'light' and 'dark' themes! tools: 'blemish',//这里设置为all，可以显示所有的工具 initTool: 'blemish',//默认展开的工具 language: 'zh_HANS',//简体中文 appendTo: '', onSave: function (imageID, newURL) { //alert(newURL); $.ajax({ url: "ashx/CarInfo.ashx?type=DownloadCarPhoto&imgUrl=" + newURL + "&rand=" + Math.random(), success: function (url) { alert('保存成功'); var img = document.getElementById(imageID); img.src = url; }, error: function () { alert('error') } }); }, onError: function (errorObj) { alert(errorObj.message); } }); function launchEditor(id, src) { featherEditor.launch({ image: id, url: src }); return false; } </script> </head> <body> <form id="form1" runat="server"> <div id='injection_site'></div> <%--http://images.aviary.com/imagesv5/feather_default.jpg--%> <%--http://car0.autoimg.cn/car/upload/2015/1/8/v_20150108092921264345010.jpg--%> <img id='image1' src='http://images.aviary.com/imagesv5/feather_default.jpg'/> <!-- Add an edit button, passing the HTML id of the image and the public URL of the image --> <p><input type='image' src='' value='Edit photo' onclick="return launchEditor('image1', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p> </form> </body> </html>
CarInfo.ashx功能是下载处理好的图片到本地，代码参考（来自网络）：
/// <summary> /// 下载远程图片保存到本地 /// </summary> /// <param name="savedir">本地保存路径</param> /// <param name="imgpath">远程图片文件</param> /// <returns></returns> public string downRemoteImg(string savedir, string imgpath) { if (string.IsNullOrEmpty(imgpath)) return string.Empty; else { string imgName = string.Empty; string imgExt = string.Empty; string saveFilePath = string.Empty; imgName = imgpath.Substring(imgpath.LastIndexOf("/"), imgpath.Length - imgpath.LastIndexOf("/")); imgExt = imgpath.Substring(imgpath.LastIndexOf("."), imgpath.Length - imgpath.LastIndexOf(".")); saveFilePath = System.Web.HttpContext.Current.Server.MapPath(savedir); if (!Directory.Exists(saveFilePath)) Directory.CreateDirectory(saveFilePath); try { WebRequest wreq = WebRequest.Create(imgpath); wreq.Timeout = 10000; HttpWebResponse wresp = (HttpWebResponse)wreq.GetResponse(); Stream s = wresp.GetResponseStream(); System.Drawing.Image img; img = System.Drawing.Image.FromStream(s); switch (imgExt.ToLower()) { case ".gif": img.Save(saveFilePath + imgName, ImageFormat.Gif); break; case ".jpg": case ".jpeg": img.Save(saveFilePath + imgName, ImageFormat.Jpeg); break; case ".png": img.Save(saveFilePath + imgName, ImageFormat.Png); break; case ".icon": img.Save(saveFilePath + imgName, ImageFormat.Icon); break; case ".bmp": img.Save(saveFilePath + imgName, ImageFormat.Bmp); break; } img.Dispose(); s.Dispose(); return savedir + imgName; } catch { return imgpath; } } }
