结合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;
}
上一篇:python + pyinstaller 实现将python程序打包成exe文件直接运行


下一篇:前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程