在线编辑图片（转）

最新推荐文章于 2022-02-20 17:02:05 发布

weixin_33682790

最新推荐文章于 2022-02-20 17:02:05 发布

阅读量148

点赞数

文章标签：移动开发 xhtml javascript ViewUI

阅读目录

一个免费的图片编辑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' οnclick="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-pixel cropPresets perform a resize 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')

}

});

},

4 官方文档

https://creativesdk.adobe.com/docs/web/#/index.html

在线系列

http://www.cnblogs.com/fengwenit/p/4738260.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。