本例以web调用做为例子，本插件支持主流浏览器，IE要9以上，移动设备，触屏设备也支持，能自适应屏幕大小。

使用效果：

工具还是很丰富的，编辑完成之后，可以保存图片至本地目录。

使用说明：

1，需要在线注册账号，申请apikey，地址：https://creativesdk.adobe.com/docs/web，这个apikey在代码调用时需要。这里也有详细的api文档，其他功能请参考文档说明，不过文档是英文的。

2，要编辑的图片必须有固定的地址，可以被网络访问到。

示例源代码，以web调用为例：

<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="js/CarPhotoEdit.js"></script>--%>

    <script src="../Scripts/jquery-1.7.1.js"></script>

    <script src="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script>

    <script type='text/javascript'>

        //在线编辑图片功能，第三方插件，完全免费

        var featherEditor = new Aviary.Feather({

            apiKey: 'wanghuifang2008@yeah.net',//apikey可以免费申请，https://creativesdk.adobe.com/docs/web/#/index.html

            apiVersion: 3,

            theme: 'dark', // Check out our new 'light' and 'dark' themes!

            tools: 'blemish',//这里设置为all，可以显示所有的工具

            initTool: 'blemish',//默认展开的工具

            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>

<%--http://images.aviary.com/imagesv5/feather_default.jpg--%>

<%--http://car0.autoimg.cn/car/upload/2015/1/8/v_20150108092921264345010.jpg--%>

<img id='image1' src='http://images.aviary.com/imagesv5/feather_default.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', 'http://images.aviary.com/imagesv5/feather_default.jpg');" /></p>

    </form>

</body>

</html>
CarInfo.ashx功能是下载处理好的图片到本地，代码参考（来自网络）：
/// <summary>

    /// 下载远程图片保存到本地

    /// </summary>

    /// <param name="savedir">本地保存路径</param>

    /// <param name="imgpath">远程图片文件</param>

    /// <returns></returns>

    public string downRemoteImg(string savedir, string imgpath)

    {

        if (string.IsNullOrEmpty(imgpath))

            return string.Empty;

        else

        {

            string imgName = string.Empty;

            string imgExt = string.Empty;

            string saveFilePath = string.Empty;

            imgName = imgpath.Substring(imgpath.LastIndexOf("/"), imgpath.Length - imgpath.LastIndexOf("/"));

            imgExt = imgpath.Substring(imgpath.LastIndexOf("."), imgpath.Length - imgpath.LastIndexOf("."));

            saveFilePath = System.Web.HttpContext.Current.Server.MapPath(savedir);

            if (!Directory.Exists(saveFilePath))

                Directory.CreateDirectory(saveFilePath);

            try

            {

                WebRequest wreq = WebRequest.Create(imgpath);

                wreq.Timeout = ;

                HttpWebResponse wresp = (HttpWebResponse)wreq.GetResponse();

                Stream s = wresp.GetResponseStream();

                System.Drawing.Image img;

                img = System.Drawing.Image.FromStream(s);

                switch (imgExt.ToLower())

                {

                    case ".gif":

                        img.Save(saveFilePath + imgName, ImageFormat.Gif);

                        break;

                    case ".jpg":

                    case ".jpeg":

                        img.Save(saveFilePath + imgName, ImageFormat.Jpeg);

                        break;

                    case ".png":

                        img.Save(saveFilePath + imgName, ImageFormat.Png);

                        break;

                    case ".icon":

                        img.Save(saveFilePath + imgName, ImageFormat.Icon);

                        break;

                    case ".bmp":

                        img.Save(saveFilePath + imgName, ImageFormat.Bmp);

                        break;

                }

                img.Dispose();

                s.Dispose();

                return savedir + imgName;

            }

            catch

            {

                return imgpath;

            }

        }

    }
												


											
编辑美化图片，保存至本地，Adobe出品（支持IOS，android，web调用）免费插件的更多相关文章
	

    
								
  1. php 获取远程图片保存到本地
		
    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...
    
		
    2. 
						
  2. iOS 将图片保存到本地
		
    //将图片保存到本地 + (void)SaveImageToLocal:(UIImage*)image Keys:(NSString*)key {     NSUserDefaults* prefer ...
    
		
    3. 
						
  3. iOS-iOS调用相机调用相册【将图片保存到本地相册】
		
    设置头部代理 <UINavigationControllerDelegate, UIImagePickerControllerDelegate> 1.调用相机 检测前置摄像头是否可用 -  ...
    
		
    4. 
						
  4. Android View转为图片保存为本地文件，异步监听回调操作结果；
		
    把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...
    
		
    5. 
						
  5. js截图及绕过服务器图片保存至本地（html2canvas）
		
    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...
    
		
    6. 
						
  6. React Native之图片保存到本地相册(ios android)
		
    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...
    
		
    7. 
						
  7. FFmpeg解码视频帧为jpg图片保存到本地
		
    FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635
    
		
    8. 
						
  8. java将base64解析图片保存到本地。
		
    将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...
    
		
    9. 
						
  9. 2018-5-22-SublimeText-粘贴图片保存到本地
		
    title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Thinkphp回顾之(四)查询方法深入学习
			
    本次讲的查询方法主要有:表达式查询,模糊查询,between语句,in语句,区间查询,统计数据,普通方式查询,但大多数都只是引入数组而已,明白了第一个,其他的也就差不多全明白了,唯一要注意的是在后台中 ...
    
			
    2. 
						
  2. [课程设计]Scrum 3.2 多鱼点餐系统开发进度（页面优化&下单详细信息页面）
			
    Scrum 3.2 多鱼点餐系统开发进度(页面优化&下单详细信息页面)  1.团队名称:重案组 2.团队目标:长期经营,积累客户充分准备,伺机而行 3.团队口号:矢志不渝,追求完美 4.团队选 ...
    
			
    3. 
						
  3. java动态代理原理
			
    我们经常会用到Java的动态代理技术, 虽然会使用, 但是自己对其中的原理却不是很了解.比如代理对象是如何产生的, InvocationHandler的invoke方法是如何调用的?今天就来深究下Ja ...
    
			
    4. 
						
  4. AngularJS 学习
			
    原文链接: https://www.zybuluo.com/frank-shaw/note/509653 Promises in AngularJS, Explained as a Cartoon h ...
    
			
    5. 
						
  5. JAVA中取余(%)规则和介绍
			
    在java中%的含义为取余. java :a%b 数学公式a%b=a-(a/b)*b
    
			
    6. 
						
  6. R语言解读多元线性回归模型
			
    转载:http://blog.fens.me/r-multi-linear-regression/ 前言 本文接上一篇R语言解读一元线性回归模型.在许多生活和工作的实际问题中,影响因变量的因素可能不止 ...
    
			
    7. 
						
  7. 第一个python实例--监控cpu
			
    #第一个python实例:监控cpu #/bin/bash/env Python from __future__ import print_function from collections impo ...
    
			
    8. 
						
  8. PSR-1：基本的代码风格
			
    PHP标签 必须把PHP代码放在<?php ?>或<?= ?>标签中.不得使用其他PHP标签句法. 编码 所有PHP文件都必须使用UTF-8字符集编码,而且不能有字节顺序标记( ...
    
			
    9. 
						
  9. yum安装命令的使用方法
			
    yum安装常用软件的命令 #yum check-update #yum remove 软件包名 #yum install 软件包名 #yum update 软件包名 yum命令常见使用方法 yum - ...
    
			
    10. 
						
  10. Javascript学习笔记：2种其他类型转换为数字Number类型的方式
			
    ①使用parseInt()/parseFloat()(在ECMAScript6中是Number.parseInt()/Number.parseFloat()) console.log(parseInt ...
    
			
    11.