在线编辑图片 （含完整源码)
一个免费的图片编辑SDK，可用于web，ios，android平台。本文主要介绍web端使用方法。
一个免费的图片编辑SDK，可用于web，ios，android平台。本文主要介绍web端使用方法。
1 效果图
点击 “Edit Photo” 按钮， 查看效果图
2 实现
复制下面代码，保存为html文件
<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="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script>
<script type=\'text/javascript\'>
//在线编辑图片功能，第三方插件，完全免费
var featherEditor = new Aviary.Feather({
apiKey: \'121285904@qq.com\',//apikey可以免费申请，https://creativesdk.adobe.com/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=\'https://img.alicdn.com/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\' onclick="return launchEditor(\'image1\', \'https://img.alicdn.com/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg\');" /></p>
</form>
</body>
</html>
作者：疯吻IT 出处：http://fengwenit.cnblogs.com
3 参数介绍
apiKey
必须，apikey可以免费申请，https://creativesdk.adobe.com/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 官方文档
https://creativesdk.adobe.com/docs/web/#/index.html