本例以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调用)免费插件的更多相关文章

  1. php 获取远程图片保存到本地

    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...

  2. iOS 将图片保存到本地

    //将图片保存到本地 + (void)SaveImageToLocal:(UIImage*)image Keys:(NSString*)key {     NSUserDefaults* prefer ...

  3. iOS-iOS调用相机调用相册【将图片保存到本地相册】

    设置头部代理 <UINavigationControllerDelegate, UIImagePickerControllerDelegate> 1.调用相机 检测前置摄像头是否可用 - ...

  4. Android View转为图片保存为本地文件,异步监听回调操作结果;

    把手机上的一个View或ViewGroup转为Bitmap,再把Bitmap保存为.png格式的图片: 由于View转Bitmap.和Bitmap转图片都是耗时操作,(生成一个1M的图片大约500ms ...

  5. js截图及绕过服务器图片保存至本地(html2canvas)

    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...

  6. React Native之图片保存到本地相册(ios android)

    React Native之图片保存到本地相册(ios android) 一,需求分析 1,react native保存网络图片到相册,iOS端可以用RN自带的CameraRoll完美解决,但是andr ...

  7. FFmpeg解码视频帧为jpg图片保存到本地

    FFmpeg解码视频帧为jpg图片保存到本地 - CSDN博客 https://blog.csdn.net/qq_28284547/article/details/78151635

  8. java将base64解析图片保存到本地。

    将base64解析图片保存到本地的两个方法 /** * base64转图片 * @param base64str base64码 * @param savePath 图片路径 * @return */ ...

  9. 2018-5-22-SublimeText-粘贴图片保存到本地

    title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...

随机推荐

  1. sqlite嵌入式数据库C语言基本操作(1)

    sqlite嵌入式数据库C语言基本操作(1) :first-child{margin-top:0!important}img.plugin{box-shadow:0 1px 3px rgba(0,0, ...

  2. 如何阅读android framework源码

    但如果想深入的了解Android系统, 那么可以看下我的一些简单的总结. 知识 Java Java是AOSP的主要语言之一. 没得说, 必需熟练掌握. 熟练的Android App开发 Linux A ...

  3. C# ASP.NET 读取EXCEL 单元格 读取 空值 不显示

    跟大家分享一下,[摘自]:http://blog.csdn.net/li185416672/article/details/8213729 读取excel时,某些单元格为空值 原来如此: 当我们用ol ...

  4. (转)深入浅出 妙用Javascript中apply、call、bind

    原文连接 深入浅出 妙用Javascript中apply.call.bind 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且 ...

  5. 一看便知linux下mysql报错ERROR 1044: Access denied for user: '@localhost' to database 'mysql'

    错误信息:ERROR 1044: Access denied for user: '@localhost' to database 'mysql' linux下解决方案: mysql> use ...

  6. ORACLE常用SQL优化hint语句

    在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法: 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量, ...

  7. JSP Filter用法

    1.filter的作用 在HttpServletRequest请求到达Servlet之前,拦截客户的HttpServletRequest 根据需要检查HttpServletRequest的相关信息,修 ...

  8. python之前端

    一.Html总结 1.Html简介 HTML 是一种标记语言 忽略大小写,语法宽松 使用 HTML 标记和元素,可以: 控制页面和内容的外观 发布联机文档 使用 HTML 文档中插入的链接检索联机信息 ...

  9. s5pv210启动debian出错提示bash: cannot set terminal process group (-1): Inappropriate ioctl for device

    1.启动参数如下: bootargs=root=/dev/nfs nfsroot=192.168.1.8:/opt/wheezy_fs ip=192.168.1.9:192.168.1.8:192.1 ...

  10. 详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别(转)

    对于php$_SERVER这个全局变量 ,里面有很多的参数,慢慢的熟悉 1,http://localhost/aaa/ (打开aaa中的index.php)结果:$_SERVER['QUERY_STR ...