web实现QQ头像上传截取功能

由于最近一段时间比较忙，发现好久没写博客了，给大家分享下最近搞的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" alt="" />

                        </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" alt="" />

                        </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" alt="" 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

<script>

function change() {

var pic = document.getElementById("HeadPic"),

file = document.getElementById("file");

var ext = file.value.substring(file.value.lastIndexOf(".") + 1).toLowerCase();

// gif在IE浏览器暂时无法显示

if (ext != 'png' && ext != 'jpg' && ext != 'jpeg') {

alert("图片的格式必须为png或者jpg或者jpeg格式！");

return;

}

var isIE = navigator.userAgent.match(/MSIE/) != null,

isIE6 = navigator.userAgent.match(/MSIE 6.0/) != null;

if (isIE) {

file.select();

file.blur();

var reallocalpath = document.selection.createRange().text;

// IE6浏览器设置img的src为本地路径可以直接显示图片

if (isIE6) {

pic.src = reallocalpath;

} else {

//// 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现

//pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='crop',src=\"" + reallocalpath + "\")";

//// 设置img的src为base64编码的透明图片取消显示浏览器默认图片

//pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

//CutPic();

$("#HeadForm").ajaxSubmit({

type: "POST",

url: "/AjaxCommon/UpPic/",

dataType: "text",

success: function (data) {

$("#HeadSrc").val(data);

$("#HeadPic").attr("src", "@ReadConfig.GetHostUrl("Host")" + data);

CutPic();

}

});

}

} else {

html5Reader(file);

}

function html5Reader(file) {

var file = file.files[0];

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (e) {

var pic = document.getElementById("HeadPic");

pic.src = this.result;

$("#HeadForm").ajaxSubmit({

type: "POST",

url: "/AjaxCommon/UpPic/",

dataType: "text",

success: function (data) {

$("#HeadSrc").val(data);

CutPic();

}

});

CutPic();

};

}

function CutPic() {

var $image = $('.img-container>img');

var options = {

aspectRatio: 5 / 2,

preview: '.img-preview',

};

$image.cropper(options);

}

function SubmitHead() {

$.N*Post({

url: "/Handler/CutImage.ashx",

data: {

filesrc: $("#HeadPic").attr("src"),

top: parseInt($(".cropper-move").offset().top - $(".cropper-canvas").offset().top),

left: parseInt($(".cropper-move").offset().left - $(".cropper-canvas").offset().left),

height: parseInt($(".cropper-move").css("height")),

width: parseInt($(".cropper-move").css("width")),

HeadSrc: $("#HeadSrc").val()

},

callback: function (data) {

if (data.status == "no") {

alert("对不起上传失败");

} else {

alert("上传成功");

window.location.reload();

}

});

}

</script>

　　上传图片的方法

 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

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.IO;

using System.Linq;

using System.Web;

using BCommon.common;

using BLL.BLL;

using Model.Model;

namespace www.n*.com.Handler

{

/// <summary>

/// CutImage 的摘要说明

/// </summary>

public class CutImage : IHttpHandler, System.Web.SessionState.IRequiresSessionState

{

/// <summary>

/// 对图像的裁减操作主入口

/// </summary>

/// <param name="context">所有HTTP请求的特定信息</param>

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/json";

string fileSource = context.Request["filesrc"];

//原文件路径和文件名

//文件保存路径

string HostUrl = ReadConfig.GetHostUrl("HostUrl");

//minilogo的保存路径

string path100 = ReadEnum.GetFilePath((int)FilePath.GYS_inLOGO100_40);

string path200 = ReadEnum.GetFilePath((int)FilePath.GYS_inLOGO200_80);

int cutY = int.Parse(context.Request["top"]); //Y轴坐标

int cutX = int.Parse(context.Request["left"]); //X轴坐标

int cutWidth = int.Parse(context.Request["width"]); //裁减宽度

int cutHeight = int.Parse(context.Request["height"]); //裁减高度

string HeadSrc = HostUrl + context.Request["HeadSrc"];

//裁减后上传

CutImg(HeadSrc, cutX, cutY, cutWidth, cutHeight, path100, "GYS_inLOGO100_40", context);

CutImg(HeadSrc, cutX, cutY, cutWidth, cutHeight, path200, "GYS_inLOGO200_80", context);

//如果文件存在，说明文件上传成功

if (File.Exists(HostUrl + path100) && File.Exists(HostUrl + path200))

{

var user = (B_Com_User)context.Session["LoginUser"];

var com = new B_Com_CompanyBLL().SelectByID(user.CompanyID.ToString());

com.LogoUrl = HeadSrc;

com.LogoMiddleUrl = path200;

com.LogoSmallUrl = path100;

if (new B_Com_CompanyBLL().UpdateLogoById(com))

{

context.Response.Write("{\"status\":\"ok\"}");

}

else

{

context.Response.Write("{\"status\":\"no\"}");

}

else

{

context.Response.Write("{\"status\":\"error\"}");

}

/// <summary>

/// 从指定路径中获取图片，按照指定位置及大小截取相应的图片内容，并保存到指定路径下

/// </summary>

/// <param name="filepath">图片来源路径及文件名(已使用Server.MapPath)</param>

/// <param name="cutX">裁减的起始X轴坐标</param>

/// <param name="cutY">裁减的起始Y坐标</param>

/// <param name="cutwidth">裁减的宽度</param>

/// <param name="cutheight">裁减的高度</param>

/// <param name="savepath">裁减后的图片名称，路径为上一级的images文件夹中</param>

/// <param name="context">所有http特定的信息对象</param>

void CutImg(string filepath, int cutX, int cutY, int cutwidth, int cutheight, string savepath, string fileName, HttpContext context)

{

//TODO 判断文件类型暂时未做

//创建图像对象，由于web中有个image控件，会导致这个图像的类重复，需要带上使用命名空间

System.Drawing.Image oldImage = System.Drawing.Image.FromFile(filepath);

//创建一个指定宽高的图像对象

System.Drawing.Image newImage = new Bitmap(cutwidth, cutheight);

//创建存放截取图像的画布

Graphics newGraphics = Graphics.FromImage(newImage);

//创建矩形对象，裁减是就是照着这个矩形来裁减的

Rectangle CutReatangle = new Rectangle(cutX, cutY, cutwidth, cutheight);

//创建矩形对象，用于下面的指定裁减出来的图像在新画布上的显示情况

Rectangle showRectangle = new Rectangle(0, 0, cutwidth, cutheight);

//执行裁减操作

newGraphics.DrawImage(oldImage, showRectangle, CutReatangle, GraphicsUnit.Pixel);

//释放资源（除图像对象的资源）

oldImage.Dispose();

newGraphics.Dispose();

DateTime time = DateTime.Now;

CreateFile.CreateFolder(ReadConfig.GetHostUrl("HostUrl") + ReadConfig.GetHostUrl(fileName) + "\\" + time.Year + "\\" + time.Month + "\\" + time.Day + "\\");

//保存新图到指定路径

//newImage.Save(ReadConfig.GetHostUrl("HostUrl") + savepath, System.Drawing.Imaging.ImageFormat.Jpeg);

if (fileName == "GYS_inLOGO100_40")

{

newImage.ImageWinvarOptions(ReadConfig.GetHostUrl("HostUrl") + savepath, 100, 40, 100);

}

else

{

newImage.ImageWinvarOptions(ReadConfig.GetHostUrl("HostUrl") + savepath, 200, 80, 100);

}

//释放新图像的资源，如果在保存前释放，会造成程序出错

newImage.Dispose();

}

/// <summary>

/// 判断原始文件后缀是否符合要求规范

/// </summary>

/// <param name="filepath">原始文件路径</param>

/// <returns>true为符合</returns>

bool CheckImageMime(string filepath)

{

int typeLastShow = filepath.LastIndexOf('.');

string[] imageType = { "jpg", "gif", "png", "bmp" };

for (int i = 0; i < imageType.Length; i++)

{

//如果有后缀名且后缀符合规范

if (typeLastShow > 0 && imageType[i].Equals(filepath.Substring(typeLastShow + 1), StringComparison.OrdinalIgnoreCase))

{

return true;

}

return false;

}

/// <summary>

/// 根据原始文件名返回前面加上操作时间的文件名

/// </summary>

/// <param name="filepath">原文件全名（路径+文件名称）</param>

/// <returns>新的文件名称</returns>

string NewFileName(string filepath)

{

//获取文件原名

string oldFileName = filepath.Substring(filepath.LastIndexOf("\\") + 1);

//获取操作时间，原使用的是yyyyMMddHHmmssffff

string date = DateTime.Now.ToString("yyyyMMddHHmmss") + DateTime.Now.Millisecond.ToString();

//新文件名

string newFileName = date + oldFileName;

return newFileName;

}

public bool IsReusable

{

get

{

return false;

}

　　压缩图片的方法

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();

            }

        }

    }

}

秒客网

web实现QQ头像上传截取功能

相关文章