您的位置：首页 > 其它

在线编辑图片（转）

2015-08-18 12:58 344 查看

阅读目录

1效果图

2实现

3参数介绍

4官方文档

一个免费的图片编辑SDK，可用于web，ios，android平台。本文主要介绍web端使用方法。

回到顶部

1效果图

点击“EditPhoto”按钮，查看效果图

回到顶部

2实现

复制下面代码，保存为html文件

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>图片编辑</title>

<scriptsrc="https://code.jquery.com/jquery-1.7.2.js"></script>

<scriptsrc="https://dme0ih8comzn4.cloudfront.net/js/feather.js"></script>

<scripttype='text/javascript'>

//在线编辑图片功能，第三方插件，完全免费

varfeatherEditor=newAviary.Feather({

apiKey:'121285904@qq.com',//apikey可以免费申请，https://creativesdk.adobe.com/docs/web/#/index.html

apiVersion:3,

theme:'dark',//Checkoutournew'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('保存成功');

varimg=document.getElementById(imageID);

img.src=url;

},

error:function(){

alert('error')

});

},

onError:function(errorObj){

alert(errorObj.message);

});

functionlaunchEditor(id,src){

featherEditor.launch({

image:id,

url:src

});

returnfalse;

</script>

</head>

<body>

<formid="form1"runat="server">

<divid='injection_site'></div>

<imgid='image1'src='https://img.alicdn.com/imgextra/i2/62935302/TB2hBzSeXXXXXbMXXXXXXXXXXXX_!!62935302.jpg'/>

<!--Addaneditbutton,passingtheHTMLidoftheimageandthepublicURLoftheimage-->

<p><inputtype='image'src=''value='Editphoto'onclick="returnlaunchEditor('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

:Autocorrectyourphotowithoneoffivebasicenhancements.

effects

:Choosefromavarietyofeffectsandfiltersforyourphoto.

frames

:Choosefromavarietyofframestoapplyaroundyourphoto.

overlays

:Choosefromavarietyofoverlaystoapplyoveryourphoto.

stickers

:Choosefromavarietyofstickersyoucanresizeandplaceonyourphoto.

orientation

:Rotateandflipyourphotoinonetool.

crop

:Cropaportionofyourphoto.AddpresetsviaAPI.Fixed-pixel

cropPresets

performa

resize

whenapplied.

resize

:Resizetheimageusingwidthandheightnumberfields.

lighting

:Adjustthelightinginyourphotowiththiscollectionofadjustmenttoools.

color

:Adjustthecolorinyourphotowiththiscollectionofadjustmenttoools.

sharpness

:Blurorsharpentheoverallimageinonetool.

focus

:Addsaselectivelinearorradialfocustoyourphoto.

vignette

:Addsanadjustablevignettetoyourphoto.

blemish

:Removeskinblemisheswithabrush.

whiten

:Whitenteethwithabrush.

redeye

:Removeredeyefromyourphotowithabrush.

draw

:Adddoodleoverlayswithabrush.

colorsplash

:Useasmartbrushtocolorizepartsofyourphotowhichbecomesgrayscaleotherwise.

text

:Addcustom,resizabletext.

meme

:Turnyourphotointoamemewiththistoolthataddstexttothetopandbottomofyourphoto.

默认展开的工具

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('保存成功');

varimg=document.getElementById(imageID);

img.src=url;

},

error:function(){

alert('error')

}

});

},

回到顶部

4官方文档

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

在线系列

/article/4907209.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航