Mikel
项目中涉及到图片的美化和拼接的功能，于是用了美图秀秀开放平台的api
美图秀秀开放平台地址：http://open.web.meitu.com/
具体步骤如下：
1.创建MeiTuUpload.aspx视图页面：
页面代码：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>图片编辑</title>
<% List<NewTang.Models.Entity.PicInfo> pics = new List<NewTang.Models.Entity.PicInfo>();
if (ViewData["Pics"] != null)
{
pics=(List<NewTang.Models.Entity.PicInfo>)ViewData["Pics"];
}
%>
<script src="http://open.web.meitu.com/sources/xiuxiu.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript" >
window.onload=function(){
xiuxiu.setFlashvars("localFileEnabled", 1);
xiuxiu.embedSWF("altContent",2,"100%","100%");
/*第1个参数是加载编辑器div容器，第2个参数是编辑器类型，第3个参数是div容器宽，第4个参数是div容器高*/
xiuxiu.setUploadURL("http://localhost:4657/Components/stream.ashx"); //修改为您自己的上传接收图片程序
xiuxiu.onInit = function ()
{
<% if(pics.Count>0){ %>
xiuxiu.loadPhoto("<%=pics[0].Path %>");
<%} %>
}
xiuxiu.onUploadResponse = function (data)
{
//alert("上传响应" + data);
parent.setfilePath(data);
parent.meitu.close();
}
xiuxiu.onClose = function() {
parent.meitu.close();
}
}
function closewbox() {
}
function setfilePath(data)
{
}
</script>
<style type="text/css">
html, body { height:100%; overflow:hidden; }
body { margin:0; }
</style>
</head>
<body >
<form id="upload" action="/Shop/UpLoadImage" method="post"
enctype="multipart/form-data">
<div id="altContent">
<h1>美图秀秀</h1>
</div>
</form>
</body>
</html>
2.创建MeiTuUpload的Action
代码如下：
/// <summary>
/// 美图秀秀拼图
/// </summary>
/// <param name="newsInfoId"></param>
/// <returns></returns>
public ActionResult MeiTuUpload(string newsInfoId)
{
try
{
ViewData["title"] = "美图拼图";
PicInfo pic = new PicInfo();
pic.NewsInfoId = newsInfoId;
ViewData["Pics"] = business.Select<PicInfo>(pic);
//主题信息
NewsInfo news = new NewsInfo() { NewsInfoID=newsInfoId };
ViewData["News"] = business.Select<NewsInfo>(news);
}
catch (Exception e)
{
return new BaseController().Error("Error", "错误信息", e.Message);
}
return View();
}
3.创建文件上传stream.ashx文件，可以从官方下载：备注：setUploadURL(“”) 参数为接收图片文件。php示例可参考 流式上传 或者 标准表单上传；C#示例可参考 流式上传 或者 标准表单上传
代码如下：
using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Configuration;
using System.IO;
using System.Drawing;
using XiuXiuWeb.XiuXiuStream;
namespace XiuXiuWeb
{
/// <summary>
/// Summary description for stream
/// </summary>
public class stream : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
//config 配置节点可以将图片保存至指定目录，未配置将保存至 /XiuXiuUpload
//<appSettings>
// <add key="XiuXiuImageSavePath" value="/upload"/>
//</appSettings>
string name = null;
if (context.Request.TotalBytes > 0)
{
XiuXiuStreamImage img = new XiuXiuStreamImage(context);
name = img.Save();
}
else
{
name = "非法访问";
}
context.Response.ContentType = "text/plain";
context.Response.Write(name);
}
public bool IsReusable
{
get
{
return false;
}
}
}
namespace XiuXiuStream
{
/// <summary>
/// 上传抽象类
/// </summary>
public abstract class XiuXiuImage
{
public String ImageUrl { get;set;}
/// <summary>
/// 基类保存
/// </summary>
/// <returns>返回保存路径+文件名</returns>
public virtual string Save()
{
string fileName = this.GetFileName();
if (null == fileName) return null;
//string root = HttpContext.Current.Server.MapPath(path);
string thisDate = "";
thisDate = DateTime.Now.Year.ToString();
if (DateTime.Now.Month < 10)
{
thisDate += "0" + DateTime.Now.Month.ToString();
}
else
{
thisDate += DateTime.Now.Month.ToString();
}
if (DateTime.Now.Day < 10)
{
thisDate += "0" + DateTime.Now.Day.ToString();
}
else
{
thisDate += DateTime.Now.Day.ToString();
}
string relativePath = System.Web.HttpContext.Current.Server.MapPath(ConfigurationSettings.AppSettings["UploadDirectory"] + "pic/" + thisDate.ToString().Replace(" ", ""));
if (!Directory.Exists(relativePath))
{
Directory.CreateDirectory(relativePath);
}
//if (!Directory.Exists(root))
//{
// Directory.CreateDirectory(root);
//}
this.ImageUrl=ConfigurationSettings.AppSettings["WebSiteUrl"] + "/UploadFiles/pic/" + thisDate.ToString().Replace(" ", "") + "/" + fileName;
this.FileName = Path.Combine(relativePath, fileName);
string[] paths = { relativePath, fileName };
return string.Join("/", paths);
}
public XiuXiuImage()
{
path = path == null ? "/XiuXiuUpload" : path;
}
/// <summary>
/// 确定上传类型
/// </summary>
protected bool IsUplodType
{
get
{
string extension = this.GetExtension();
return ".jpg .gif .png .icon .bmp .tiff .wmf .emf .exif".IndexOf(extension) >= 0 ? true : false;
}
}
private string _fileName = null;
/// <summary>
/// 最终保存路径
/// </summary>
protected string FileName
{
set { _fileName = value; }
get { return _fileName; }
}
/// <summary>
/// 配置文件路径 无配置上传到XiuXiuUpload
/// </summary>
protected string path = ConfigurationManager.AppSettings["UploadDirectory"];
/// <summary>
/// 获取拓展名
/// </summary>
/// <returns></returns>
protected abstract string GetExtension();
/// <summary>
/// 获取最终保存文件名
/// </summary>
/// <returns></returns>
protected string GetFileName()
{
string extension = this.GetExtension();
if (null == extension) return null;
else
{
string name = this.GetName();
string[] imgName = { "news", name, extension };
return string.Join("", imgName);
}
}
/// <summary>
/// 获取保存文件名
/// </summary>
/// <returns></returns>
private string GetName()
{
DateTime uploadTime = DateTime.Now;
string[] times = { uploadTime.Year.ToString(), uploadTime.Month.ToString(), uploadTime.Day.ToString(),
uploadTime.Hour.ToString(), uploadTime.Millisecond.ToString(), uploadTime.Second.ToString() };
return string.Join("", times);
}
}
/// <summary>
/// Stream接收
/// </summary>
public sealed class XiuXiuStreamImage : XiuXiuImage
{
private MemoryStream stream = null;
//图片的url路径
private String webPath=null;
public XiuXiuStreamImage(HttpContext context)
{
int count = context.Request.TotalBytes;
if (count > 0)
{
byte[] bytes = context.Request.BinaryRead(context.Request.TotalBytes);
this.stream = new MemoryStream(bytes);
}
}
private Image File
{
get
{
return this.stream == null ? null : Image.FromStream(this.stream);
}
}
/// <summary>
/// 保存图片,成功返回文件路径,失败null
/// 非图片格式返回错误信息
/// </summary>
/// <returns>成功返回文件路径 失败null</returns>
public override string Save()
{
if (!this.IsUplodType)
{
this.stream.Dispose();
return "Only allowed to upload pictures.";
}
string returnName = base.Save();
if (this.FileName != null)
{
this.File.Save(this.FileName);
this.stream.Dispose();
return ImageUrl;
}
return null;
}
protected override string GetExtension()
{
if (this.File != null)
{
string fileExtension = this.File.RawFormat.ToString().Substring(14),
jpgExtension = System.Drawing.Imaging.ImageFormat.Jpeg.Guid.ToString(),
gifExtension = System.Drawing.Imaging.ImageFormat.Gif.Guid.ToString(),
pngExtension = System.Drawing.Imaging.ImageFormat.Png.Guid.ToString(),
iconExtension = System.Drawing.Imaging.ImageFormat.Icon.Guid.ToString(),
bmpExtension = System.Drawing.Imaging.ImageFormat.Bmp.Guid.ToString(),
tiffExtension = System.Drawing.Imaging.ImageFormat.Tiff.Guid.ToString(),
wmfExtension = System.Drawing.Imaging.ImageFormat.Wmf.Guid.ToString(),
emfExtension = System.Drawing.Imaging.ImageFormat.Emf.Guid.ToString(),
exifExtension = System.Drawing.Imaging.ImageFormat.Exif.Guid.ToString();
fileExtension = fileExtension.Substring(0, fileExtension.Length - 1);
if (fileExtension == jpgExtension)
{
return ".jpg";
}
else if (fileExtension == gifExtension)
{
return ".gif";
}
else if (fileExtension == pngExtension)
{
return ".png";
}
else if (fileExtension == iconExtension)
{
return ".icon";
}
else if (fileExtension == bmpExtension)
{
return ".bmp";
}
else if (fileExtension == tiffExtension)
{
return ".tiff";
}
else if (fileExtension == wmfExtension)
{
return ".wmf";
}
else if (fileExtension == emfExtension)
{
return ".emf";
}
else if (fileExtension == exifExtension)
{
return ".exif";
}
}
return null;
}
}
}
}
4.调用页面,重点在这儿，官方用的是prettify.js的弹窗，我用的wbox.js的iframe加载MeiTuUpload.aspx页面来实现的调用，官方封装了个插件用于执行示例代码来动态加载美图秀秀插件，下面是代码：
页面代码：
<tr>
<td class="bg1" height="25" align="right">缩略图：</td>
<td class="bg2"><img id="imgNewsInfo" src="<%=newsInfo.NewsInfoImage %>" width="220" height="200" />
</td>
</tr>
<tr>
<td class="bg1" height="25" align="right">缩略图上传：</td>
<td class="bg2"><input type="hidden" id="filePath" name="filePath" value="<%=newsInfo.NewsInfoImage %>" /><a id="meitu" class="btngreen" href="javascript:;">拼图</a>
</td>
</tr>
js弹窗代码：
var meitu = $("#meitu").wBox({ noTitle:true,title: "拼图", requestType: "iframe", iframeWH: { width: 420, height: 400 }, target: "/NewsInfoManager/MeiTuUpload?InfoClass=2&newsInfoId=<%=newsInfo.NewsInfoID %>" });
//设置返回值的路径
function setfilePath(data) {
$('#filePath').val(data);
$('#imgNewsInfo').attr('src',data);
}
