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'/> <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-pixelcropPresets
perform aresize
when 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') } }); },
转载来自:https://www.cnblogs.com/fengwenit/p/4738260.html