在线编辑图片（转）

阅读目录

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