html裁剪头像成base64+ashx保存图片到本地
CSS 引用 https://code.csdn.net/snippets/2270112/master/imgCut.css/raw
JS 引用 https://code.csdn.net/snippets/2270138/master/imgCut.js/raw
JS
var frameY, frameX, frameW, frameH;//全局变量
var ifCutBox = false;$(document).ready(function () {
init();//初始化
});var param = { top: 0, left: 0, width: width, height: height };
if (maxWidth) {
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if (rateWidth > rateHeight) {
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
rate = rateWidth;
} else {
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
rate = rateHeight;
}
}
return param;
};
selectrate = 1;
rate = 1;
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var img = $("#view_photo");
var scaleX = $("#preview").width() / selection.width;
var scaleY = $("#preview").height() / selection.height;
$('#preview img').css({
width: Math.round(scaleX * $("#photo").width()),
height: Math.round(scaleY * $("#photo").height()),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
frameX=Math.round(selection.x1 * rate);
frameY=Math.round(selection.y1 * rate);
frameW=Math.round(selection.width * rate);
frameH=Math.round(selection.height * rate);
}
function init() {
var width = $('#photo').width();
var height = $('#photo').height();
$('#photo').imgAreaSelect({
aspectRatio: "1:1",
handles: true,
fadeSpeed: 200,
onSelectChange: preview,
});
}
function change(file) {
$.each($('#upload')[0].files, function (i, file_) {
if ("image/png" == file_.type || "image/jpeg" == file_.type) {
if (102400 < file_.size) {
layer.msg("头像上传失败！不能大于100KB");
return;
}
var files = !!file.files ? file.files : [];
if (!files.length || !window.FileReader) return;
if (!ifCutBox) {
$("#UserC_Box").append('
' +
'![]()
' +
'
'
' +
'![]()
' +
'
'
保存头像
');
ifCutBox = true;
}
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
var img = $('#photo');
img.attr("src", this.result);
$("#view_photo").attr("src", this.result);
img.load(function () {
var img = $('#photo');
img.width('100%');
img.height('100%');
var rect = clacImgZoomParam(300, 300, img.width(), img.height());
img.width(rect.width);
img.height(rect.height);
$("#preview").width(80);
$("#preview").height(80);
init();
});
}
} else {
layer.msg("请选择正确的文件格式！jpg或png");
return;
}
})
};
function saveH() {
if (!ifCut) { return layer.msg("请选择裁剪区域!"); }
var crop_canvas, width = 120, height = 120;
crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;
var img = document.getElementById("view_photo");
crop_canvas.getContext('2d').drawImage(img, frameX, frameY, frameW, frameH, 0, 0, width, height);
var index = layer.msg("上传中...", { icon: 16, time: false, shade: [0] });
var strUrl,strData,imgH64=crop_canvas.toDataURL("image/png");
imgH64 = imgH64.substring(22, imgH64.length);
strUrl = "handler/JqDataHandle.ashx?RemoteName=Ssh50h.Master";
strData = "mode=saveHead&method=modifyH¶meters=2¶meters0=" + objParam.s1user + "¶meters1=" + encodeURIComponent(imgH64);
$.ajax({
type: "POST",
url: strUrl,
data: strData,
dataType:"text",
cache: false,
async: false,
success: function (data) {
layer.close(index);
if (data.substring(0, 5) == "Error") {
layer.msg(data.substring(6, data.length));
return;
}
layer.msg("头像保存成功！");
localStorage.setItem("SHMainPage", "1");
javascript: location.href = 'SHMainPage.aspx';
return;
},
error: function (err) {
layer.close(index);
layer.msg("抱歉发生错误！请检查网络状况");
return;
}
})
};
HTML
ASHX
public void saveHead(HttpContext context)
{
string result;
string userID = context.Request.Form["parameters0"].ToString();
string base64Str = context.Request.Form["parameters1"].ToString();
base64Str = strDecode(context, base64Str);
string headPath =context.Server.MapPath("~/saveHead/"+userID+".jpg");
byte[] byteHead = Convert.FromBase64String(base64Str);
try { System.IO.File.WriteAllBytes(headPath, byteHead); } catch {result = "Error:错误代码01,保存头像失败！";
context.Response.Write(result);context.Response.End();return; }
return ;
}