结合canvas和jquery.Jcrop.js裁切图像上传图片
1、引入的外部资源:
jquery.Jcrop.css、jquery.Jcrop.js、upimg.js
2、使用的页面元素
@* 选择照片 *@
<div class="line">
<h2 class="not">请选择照片:</h2>
<div class="">
<input id="image_file" name="updata_file" accept="image/gif,image/jpg,image/bmp,image/jpeg,image/png,image/tiff,image/tif" style="display:none" value="选择照片" type="file" />
<button id="image_filebtn" class="hex-lightgrey-btn" type="button">选择照片</button>
<button id="save_btn" class="hex-green-btn" style="display: none" type="button">确认修改</button>
<span class="hex-font-orange error">仅支持JPG、PNG格式图片,且文件小于2M</span>
</div>
</div>
@* 头像裁剪和预览 *@
<div class="img">
<div id="wrapper" class="hex-wrapper" style="width: 600px;height: 600px">
@if (!string.IsNullOrEmpty(Model.Profile.User.Avatar))
{
<img id="preview" src="@WebTools.ConvertResourceUrl(Model.Profile.User.Avatar)" />
}
else
{
<img id="preview" src="/Content/Images/userdefault.jpg" />
}
</div>
<div>
<h6>头像预览:</h6>
<canvas id="cropper" width="250" height="250"></canvas>
</div>
</div>
3、使用的脚本方法
var cropper;
$(document).ready(function () {
$("#image_file").change(function () {
Loading();
fileSelectHandler();
var errorMsg = $(".error").html();
if (errorMsg != "请选择一个有效的图像文件(JPG和PNG是被允许的)" && errorMsg != "您选择的文件太大,请选择一个较小的图像文件") {
$("#save_btn").show();
}
LoadingEnd();
});
$("#image_filebtn").click(function () {
$("#image_file").click();
}); $("#save_btn").bind("click", function () {
Loading();
var imgUrl = document.getElementById("cropper").toDataURL("image/png");
var imageData = encodeURIComponent(imgUrl);
$.ajax({
url: "/Profile/PhotoHandle",
type: "post",
data: { imageData: imageData },
success: function (data) {
if (data) {
document.getElementById("photo_img").src = imgUrl;
} else {
alertno("删除失败");
LoadingEnd();
}
}
});
});
});
4、control的方法,发送服务器请求
public ActionResult PhotoHandle(string imageData)
{
string imgStr = HttpUtility.UrlDecode(imageData, Encoding.UTF8).Split(',')[];
byte[] imageBytes = Convert.FromBase64String(imgStr);
string result = SaveImage(imageBytes, CurrentUser.Name);
var obj = Common.Serialization.JsonHelper.JsonToObject<UpLoadBack>(result);
EntAppFrameWorkContext.DomainModelService.ExtenedService<IUser>()
.UpdateAvatar(Int64.Parse(CurrentUser.Key), obj.ResourceID.ToString());return Content(obj.ResourceID.ToString());
}
public static string SaveImage(byte[] imageBytes, string CurrentUserName)
{
string cms = WebConfigHelper.CmsWebsite.Replace("https", "http");
if (string.IsNullOrEmpty(cms)) return null;
var token = Token.GetToken(CurrentUserName);
string url = cms.TrimEnd('/') + "/FileManagement/UpLoadFile_Server?ssotoken=" + token;
HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(url);
request.Method = "POST";
request.KeepAlive = true;
request.ContentType = "application/x-www-form-urlencoded";
request.Headers.Add("ext", "png");
request.Headers.Add("contentType", "image/png");
request.Headers.Add("hash", imageBytes.GetHashCode().ToString());
//填充POST数据
request.ContentLength = imageBytes.Length;
//myReq.
Stream requestStream = request.GetRequestStream();
requestStream.Write(imageBytes, , imageBytes.Length);
requestStream.Close();
string result = string.Empty;
try
{
//发送POST数据请求服务器
HttpWebResponse HttpWResp = (HttpWebResponse)request.GetResponse(); Stream myStream = HttpWResp.GetResponseStream(); //获取服务器返回信息
StreamReader reader = new StreamReader(myStream, Encoding.UTF8);
result = reader.ReadToEnd(); //释放
myStream.Close(); }
catch (Exception exp)
{
result = "报错:" + exp.Message;
} return result;
}
结合canvas和jquery.Jcrop.js裁切图像上传图片的更多相关文章
- 实现图像剪裁 jquery.Jcrop
配合 jquery.Jcrop 实现上传图片进行剪裁保存功能 <script src="js/jquery.min.js"></script> ...
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- jQuery Jcrop API参数说明(中文版)(转)(图片剪切)
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
- jQuery JCrop插件的使用详解
jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件 1.最基本的使用方法: &l ...
- jQuery Jcrop 图像裁剪
jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...
- 调用jquery.Jcrop.min.js 切割图片 实例
需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js <script src="${fileUrlPrx}/scripts/wap/ ...
- js 图片处理 Jcrop.js API
引入jquery.Jcrop.min.css和jquery.Jcrop.min.js 参数/接口说明 options 参数说明 名称 默认值 说明 allowSelect true 允许新选框 all ...
- 动态生成二维码插件 jquery.qrcode.js
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jqu ...
随机推荐
- Git和Jenkins日记之没有新提交代码
日期:2017/3/9 今天查看Jenkins运行代码记录的日志时,发现并没有昨天新提交的代码,然后查看了Jenkins的测试项目中所有的自动化测试用例, 并没有看到昨天新提交的测试用例,又查看了gi ...
- topcoder srm 687 div1
1.$A_{1}=2,A_{2}=3,A_{n}=A_{n-2}+A_{n-1}-1$.给出数字$n$,将其表示成若干个$A$中的不同元素的和. 思路:设$B_{n}=A_{n}-1$,那么有$B_{ ...
- FireMonkey 源码学习(4)
(4)DoDrawLayout DoDrawLayout函数的源代码分析如下: procedure TTextLayoutNG.DoDrawLayout(const ACanvas: TCanvas) ...
- bozoj3131: [Sdoi2013]淘金 数位dp
链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3131 思路 1. 函数值的素因子只有2.3.5.7 由他们组成的状态不多,爆搜的时候即使搜不 ...
- 远程调试Spring项目
目录 服务端启动: 启动jar包: 使用环境变量参数调试jar包: 使用mvnDebug启动SpringMVC项目: 使用mvn启动: 使用Tomcat,非嵌入式启动: 客户端设置: IDEA设置: ...
- Elasticsearch查询Index以及删除
查询Index信息 GET /bank HTTP/1.1Host: localhost:9200 { "bank": { "aliases": {}, &quo ...
- P2633 Count on a tree
思路 运用树上差分的思想,转化成一个普通的主席树模型即可求解 代码 #include <cstdio> #include <algorithm> #include <cs ...
- 深度学习课程笔记(一)CNN 卷积神经网络
深度学习课程笔记(一)CNN 解析篇 相关资料来自:http://speech.ee.ntu.edu.tw/~tlkagk/courses_ML17_2.html 首先提到 Why CNN for I ...
- js中属性点.和中括号[]的关系。
本来这里说的是 js 执行一个字符串形式函数的方法. 但是呢看到一个 window['test'] ,居然一下子转不过弯来.这就尴尬了. 不是说好了 [] 和 . 其他都是 “什么的什么” 关系吗?如 ...
- 忘记mysql密码处理方案
https://blog.csdn.net/lisongjia123/article/details/57418989 http://blog.51cto.com/lxsym/477027