Edit Images Online

Source: Internet
Author: User

A free image editing SDK that can be used on the Web,ios,android platform. This article mainly introduces the Web-side usage method.

1

Click on the "Edit Photo" button to view

2 implementation

Copy the following code, save as an HTML file

"http://www.w3.org/1999/xhtml">
"Server">
<meta http-equiv="Content-type" content= "text/html; Charset=utf-8 "/>
    <title> Photo Editor </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 '>        
        Online editing of picture features, third-party plugins, completely free
        New Aviary.feather ({
            ' [email protected] ',//apikey can apply for free, https://creativesdk.adobe.com/docs/web/#/index.html
            Apiversion:3,
            ' Dark ' //Check out our new ' light ' and ' dark ' themes!
            ' All ',//Set here to all, can display all the tools
            ' text ',//default expanded tool
            ' Zh_hans ',//Simplified Chinese
            ",          
            Onsave:function (ImageID, Newurl) {
                
                alert (Newurl);
                $.ajax ({
                    "Ashx/carinfo.ashx?type=downloadcarphoto&imgurl=" "&rand=" + math.random (),
                    Success:function (URL) {
                        Alert (' save Success ');
                        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>

 
<body>
    <form id="Form1 " runat= "Server">
   <div id=' injection_site '></div>
' image1 ' src=' https://img.alicdn.com/imgextra/i2/62935302/tb2hbzsexxxxxbmxxxxxxxxxxxx_!! 62935302.jpg '/>
 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>

 

Crazy kiss It Source: http://fengwenit.cnblogs.com

3 Parameter Introduction Apikey

Must, Apikey can apply for free, https://creativesdk.adobe.com/docs/web/#/index.html

All the tools

Tools: ' Text,resize ',//set here to all, can display all tools, if you want to display only some of the tools, you can use commas to separate

All tools are as follows:

  • enhance: Autocorrect your photo with one of five basic enhancements.

  • effects: Choose from a variety to 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-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 when resize 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, adds text to the top and bottom of your photo.

Tools that are expanded by default


Inittool: ' text ',//tools for default expansion

Language

Language: ' Zh_hans ',//Simplified Chinese

The default en is English

Save

Onsave:function (ImageID, Newurl) {

alert (Newurl);

$.ajax ({

URL: "ashx/carinfo.ashx?type=downloadcarphoto&imgurl=" + Newurl + "&rand=" + math.random (),

Success:function (URL) {

Alert (' Save Success ');

var img = document.getElementById (ImageID);

img.src = URL;

},

Error:function () {

Alert (' ERROR ')

}

});

},

4 Official documents

Https://creativesdk.adobe.com/docs/web/#/index.html

Edit Images Online

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.