编辑美化图片,保存至本地,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 = ;
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;
}
}
}
编辑美化图片,保存至本地,Adobe出品(支持IOS,android,web调用)免费插件的更多相关文章
- php 获取远程图片保存到本地
php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...
- iOS 将图片保存到本地
//将图片保存到本地 + (void)SaveImageToLocal:(UIImage*)image Keys:(NSString*)key { NSUserDefaults* prefer ...
- iOS-iOS调用相机调用相册【将图片保存到本地相册】
设置头部代理 <UINavigationControllerDelegate, UIImagePickerControllerDelegate> 1.调用相机 检测前置摄像头是否可用 - ...
- Android View转为图片保存为本地文件,异步监听回调操作结果;
把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...
- js截图及绕过服务器图片保存至本地(html2canvas)
今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...
- React Native之图片保存到本地相册(ios android)
React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...
- FFmpeg解码视频帧为jpg图片保存到本地
FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635
- java将base64解析图片保存到本地。
将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...
- 2018-5-22-SublimeText-粘贴图片保存到本地
title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...
随机推荐
- [已解决] C3p0连接配置
#用户名 c3p0.user=test c3p0.user=root # 用户密码--> c3p0.password=test c3p0.password=root c3p0.driverCla ...
- DP专题训练之HDU 2955 Robberies
打算专题训练下DP,做一道帖一道吧~~现在的代码风格完全变了~~大概是懒了.所以.将就着看吧~哈哈 Description The aspiring Roy the Robber has seen a ...
- angularjs的三目运算
前言:前几天写代码的时候遇到一个问题,有一个按钮,有"已关注"和"+关注"两种状态,需要对这两种状态的按钮的背景颜色进行区分,单后点击"已关注&quo ...
- Redhat、CentOS添加静态路由的标准方法
我们经常遇到需要在系统默认路由的基础上,额外添加静态路由的需求.为了使得下次系统启动这些静态路由依旧生效,我们可能采取在rc.loal里加入route命令追加静态路由的方法. 现在给大家推荐Redha ...
- Cookie对象工具包,对象添加,获取,修改-亲测可用
先来了解下Cookie 和 Session对象的概念吧. 首先,Cookie是客户端缓存技术,大小一般为4kb左右,主要存储一些比较小的信息,常用的例子有用户名和密码,且是不安全的: Session是 ...
- '"千"第一周学习情况记录
一周过去了,今天将我这一周的学习内容和主要感想记录与此和大家共同分享,一起进步.我将自己的学习计划命名为"千",因为我喜欢这个字,希望能用此来鼓舞自己不断前进.时间总是很快的,这一 ...
- phprpc的简单使用
PHPRPC 是一个轻型的.安全的.跨网际的.跨语言的.跨平台的.跨环境的.跨域的.支持复杂对象传输的.支持引用参数传递的.支持内容输出重定向的.支持分级错误处理的.支持会话的.面向服务的高性能远程过 ...
- Less2css error 终极解决方案(转载)
用到less时遇到的问题 ,然后复制过来的 使用sublime Text3 的时候,安装less2Css后,和很多人一样以为大功告成,开始要运行编译less文件,结果开始发现 于是乎开始搜索问题和解决 ...
- jQuery 学习笔记_01
jQuery是一个简洁快速灵活的JavaScript框架,能让你在网页上简单的操作文档.处理事件.实现特效并为Web页面添加Ajax交互. 1 jQuery大多是基于 document 一个或多个元素 ...
- language model —— basic model 语言模型之基础模型
一.发展 起源:统计语言模型起源于 Ponte 和 Croft 在 1998年的 SIGIR上发表的论文 应用:语言模型的应用很多: corsslingual retrieval distribute ...