ashx html css,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();//初始化

});function clacImgZoomParam(maxWidth, maxHeight, width, height) {

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&parameters=2&parameters0=" + objParam.s1user + "&parameters1=" + 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 ;

}