由于最近一段时间比较忙，发现好久没写博客了，给大家分享下最近搞的logo上传截取功能。在实现这个功能之前找了一些jq的插件，最后选定了cropper在github中可以找到。
具体的思路是1：选择上传的图片，在change事件中用form.jquery.js中的formajax异步提交表单，保存上传的图片
2：绑定cooper事件，对图片进行选取。
3：得到选中区域的坐标，对图片进行截取保存。
其中的难点是ie的兼容性问题，由于本人也不是很好，就不献丑了下面给大家附上代码
页面中的html
<div class="input">
<div><span class="xuanze">选择</span><input type="file" class="file" name="file" id="file" onchange="change()" /><span class="jpeg">支持jpg、jpeg、gif、png、bmp格式的图片</span></div>
<div class="xiechneg">
<span class="daxc">
@{
var url = Model.LogoMiddleUrl == null ? "" : Model.LogoMiddleUrl;
var path200 = ReadConfig.GetHostUrl("Host") + url;
}
<img src="@path200" width="118" height="49" />
</span><i class="dxgou"></i><i class="dxcha"></i><span class="shuzi01">200*80 </span>
<span class="xiaoxc">
@{
var url1 = Model.LogoSmallUrl == null ? "" : Model.LogoSmallUrl;
var path100 = ReadConfig.GetHostUrl("Host") + url1;
}
<img src="@path100" width="95" height="38" />
</span><i class="xiaoxgou"></i><i class="xiaoxcha"></i><span class="shuzi02">100*40 </span>
</div>
<div class="yzhz">
<div class="xiaoyz">
<div class="img-container">
<img src="/Content/img/xtsz/xiaoyizi.jpg" width="400" height="280" id="HeadPic" />
</div>
<span class="logo">选择本地照片，上传编辑自己的LOGO</span>
<span class="qd" onclick="SubmitHead()">确定</span>
</div>
<div class="ybXC">
<span class="lgyl">LOGO预览</span>
<div class="img-preview preview-lg">
</div>
<div class="img-preview preview-md">
</div>
</div>
</div>
</div>
cropper下载地址http://jquery-plugins.net/image-cropper-jquery-image-cropping-plugin
form.jquery.js的下载地址 http://malsup.com/jquery/form/#download
页面的js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
|
上传图片的方法
public ActionResult UpPic()
{
var file = Request.Files["file"];
if (file.ContentLength == 0)
{
return Content("请选择文件");
}
if (file.ContentLength > 307200)
{
return Content("文件过大");
}
int width = 0; int height = 0;
string path = ReadEnum.GetFilePath((int)FilePath.GYS_Logo);
string HostUrl = ReadConfig.GetHostUrl("HostUrl");
string finalPaht;
Request.Files.Processing(HostUrl, path, 400, 280, 100, out finalPaht, "GYS_Logo", 11);
string a = path;
return Content(a);
}
截取并保存截取后的图片的handler
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 |
|
压缩图片的方法
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace BCommon.common
{
public static class ImageWinvar
{
/// <summary>
/// 无损压缩图片
/// </summary>
/// <param name="img">原图片的文件流</param>
/// <param name="dFile">压缩后保存位置</param>
/// <param name="dHeight">高度</param>
/// <param name="dWidth"></param>
/// <param name="flag">压缩质量 1-100</param>
/// <returns></returns>
public static bool ImageWinvarOptions(this Image img, string dFile, int dWidth, int dHeight, int flag)
{
ImageFormat tFormat = img.RawFormat;
int sW = 0, sH = 0;
//按比例缩放
Size tem_size = new Size(img.Width, img.Height);
if (tem_size.Width > dHeight || tem_size.Width > dWidth) //将**改成c#中的或者操作符号
{
if ((tem_size.Width * dHeight) > (tem_size.Height * dWidth))
{
sW = dWidth;
sH = (dWidth * tem_size.Height) / tem_size.Width;
}
else
{
sH = dHeight;
sW = (tem_size.Width * dHeight) / tem_size.Height;
}
}
else
{
sW = tem_size.Width;
sH = tem_size.Height;
}
Bitmap ob = new Bitmap(dWidth, dHeight);
Graphics g = Graphics.FromImage(ob);
g.Clear(Color.WhiteSmoke);
g.CompositingQuality = CompositingQuality.HighQuality;
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(img, new Rectangle((dWidth - sW) / 2, (dHeight - sH) / 2, sW, sH), 0, 0, img.Width, img.Height, GraphicsUnit.Pixel);
g.Dispose();
//以下代码为保存图片时，设置压缩质量
EncoderParameters ep = new EncoderParameters();
long[] qy = new long[1];
qy[0] = flag;//设置压缩的比例1-100
EncoderParameter eParam = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, qy);
ep.Param[0] = eParam;
try
{
ImageCodecInfo[] arrayICI = ImageCodecInfo.GetImageEncoders();
ImageCodecInfo jpegICIinfo = null;
for (int x = 0; x < arrayICI.Length; x++)
{
if (arrayICI[x].FormatDescription.Equals("JPEG"))
{
jpegICIinfo = arrayICI[x];
break;
}
}
if (jpegICIinfo != null)
{
ob.Save(dFile, jpegICIinfo, ep);//dFile是压缩后的新路径
}
else
{
ob.Save(dFile, tFormat);
}
return true;
}
catch
{
return false;
}
finally
{
img.Dispose();
ob.Dispose();
}
}
}
}