编辑美化图片,保存至本地,Adobe出品(支持IOS,android,web调用)免费插件

本例以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 = 10000;
                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;
            }
        }
    }

 



 

转载于:https://www.cnblogs.com/hiflora/p/4267705.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值