一个免费的图片编辑SDK，可用于web，ios，android平台。本文主要介绍web端使用方法。
1 效果图
点击 “Edit Photo” 按钮， 查看效果图
2 实现
复制下面代码，保存为html文件
<html xmlns="/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>图片编辑</title>
<script src="/jquery-1.7.2.js"></script>
<script src="/js/feather.js"></script>
<script type='text/javascript'>
//在线编辑图片功能，第三方插件，完全免费
var featherEditor = new Aviary.Feather({
apiKey: '121285904@',//apikey可以免费申请，/docs/web/#/index.html
apiVersion: 3,
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',//这里设置为all，可以显示所有的工具
initTool: 'text',//默认展开的工具
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>
<img id='image1' src='/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.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' οnclick="return launchEditor('image1', '/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg');" /></p>
</form>
</body>
</html>
作者：疯吻IT 出处：
3 参数介绍
apiKey
必须，apikey可以免费申请，/docs/web/#/index.html
所有的工具
tools: 'text,resize',//这里设置为all，可以显示所有的工具；如果只想显示部份工具，可以用逗号分隔
所有工具如下：
enhance: Autocorrect your photo with one of five basic enhancements.
effects: Choose from a variety of effects and filters for your photo.
frames: Choose from a variety of frames to apply around your photo.
overlays: Choose from a variety of overlays to apply over your photo.
stickers: Choose from a variety of stickers you can resize and place on your photo.
orientation: Rotate and flip your photo in one tool.
crop: Crop a portion of your photo. Add presets via API. Fixed-pixelcropPresetsperform aresizewhen applied.
resize: Resize the image using width and height number fields.
lighting: Adjust the lighting in your photo with this collection of adjustment toools.
color: Adjust the color in your photo with this collection of adjustment toools.
sharpness: Blur or sharpen the overall image in one tool.
focus: Adds a selective linear or radial focus to your photo.
vignette: Adds an adjustable vignette to your photo.
blemish: Remove skin blemishes with a brush.
whiten: Whiten teeth with a brush.
redeye: Remove redeye from your photo with a brush.
draw: Add doodle overlays with a brush.
colorsplash: Use a smart brush to colorize parts of your photo which becomes grayscale otherwise.
text: Add custom, resizable text.
meme: Turn your photo into a meme with this tool that adds text to the top and bottom of your photo.
默认展开的工具
initTool: 'text',//默认展开的工具
语言
language: 'zh_HANS',//简体中文
默认en 为英语
保存
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')
}
});
},
4 官方文档
/docs/web/#/index.html
在线那些事
