阅读目录
一个免费的图片编辑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: ‘[email protected]‘,//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
http://www.cnblogs.com/fengwenit/p/4738260.html
时间： 2024-10-09 12:04:51