zoukankan      html  css  js  c++  java
  • 编辑美化图片,保存至本地,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;
                }
            }
        }


  • 相关阅读:
    linux上搭建私人Git服务器的详细教程
    25个经典的Spring面试问答
    面试题汇总
    idea 中添加查看字节码工具
    HTTP 及 http 请求解析过程
    常见的攻击类型及防范
    Postman 压力测试
    Postman 接口测试配置 Pre-request Script
    jq图片展示插件highslide.js
    cesium transform 倾斜摄影模型矩阵指定经纬度
  • 原文地址:https://www.cnblogs.com/hiflora/p/4267705.html
Copyright © 2011-2022 走看看