码迷,mamicode.com
首页 > 其他好文 > 详细

在线编辑图片(转)

时间:2015-08-18 13:46:30      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

一个免费的图片编辑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‘ 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-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

 

在线编辑图片(转)

标签:

原文地址:http://www.cnblogs.com/softidea/p/4739112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!