web实现QQ头像上传截取功能
2024-05-13 19:38:19
由于最近一段时间比较忙，发现好久没写博客了，给大家分享下最近搞的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" οnchange="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" οnclick="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
|
<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() {
$.NabianPost({
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
?
|
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.IO;
using System.Linq;
using System.Web;
using BCommon.common;
using BLL.BLL;
using Model.Model;
namespace www.nabian.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-100EncoderParameter 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();}}}
}
转载于:https://www.cnblogs.com/armyfai/p/4779877.html
web实现QQ头像上传截取功能相关推荐
- Android实现注册登录头像上传等功能常规开发(Android端，服务器端开发实例)
Android实现注册登录头像上传等功能常规开发(Android端,服务器端开发实例) 标签: 注册登录Android开发servlet 2017-04-18 20:34 454人阅读 评论(1) ...
- 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...
- Android--利用Bmob实现头像上传下载功能
声明: 本文使用Bmob作为云后台,实现一个简简单单的头像的选取.截取.上传.下载功能的实现. 编码环境:Android Studio2.1.1 运行环境:Miui8.6.8.18(安卓版本号6.0. ...
- springMVC+jcrop实现头像上传截图功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- vue 头像上传裁剪功能
1,第一步安装vue-cropper cnpm install vue-cropper 2,在main.js引用 import VueCropper from 'vue-cropper'; Vue.u ...
- 模仿qq头像上传的弹出框效果
1.涉及到知识点,如下: 1.1.自定义对话框 1.2.动画 1.3.样式选择器 1.4.shape的使用 2.代码编写 2.1首先创建选择照片的弹出对话框的布局文件,代码如下: headicon_c ...
- 调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
- SpringMVC Web实现文件上传下载功能实例解析
需求: 项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在20G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以20G来进行限制. PC端全平台支持,要求支持Window ...
- 【Bootstrap-插件使用】Jcrop+fileinput组合实现头像上传功能
作者:Dreawer 链接:https://zhuanlan.zhihu.com/p/24465742 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 作者:梦游的龙 ...
最新文章
- ipfs浏览器java实现_IPFS + Ethereum(上篇)：JS+IPFS-API存储和获取数据
- 二分类最优阈值确定_机器学习 | 详解GBDT在分类场景中的应用原理与公式推导...
- 大二暑假工作三个月后辞职，总体感悟
- $_server['php_self'] 漏洞,Discuz! $_SERVER['PHP_SELF'] XSS Vulnerability
- ESET NOD32 v11.0.154
- 计算机显示发送报告,Word文档打不开提示发送错误报告的解决方法
- vim配置——C/C++代码自动补全
- pygame游戏教程目录
- 【报错】Verion 9 of Highlight.js has reached EOL
- PPT转word可以使用什么软件
- winscp是什么软件_文件传输软件WinSCP的使用
- python中安装excel使用的模块
- CTA 策略分享之一
- 爱心之火成燎原之势——浩荣 成都传智播客支持你
- mysql带where的join加索引_MySQL索引分析和优化+JOIN的分类（转）
- oracle数据库查询近五年数据,Oracle数据库查询基本数据
- 超级简单的一个开发微信后台的源码送给大家，简单配置就可以使用呦
- Freemarker模板框架页面css样式等不起效
- Domain generalization
- VMware中无法勾选将主机虚拟适配器连接到此网络