手机摄像或上传大图片，对照片对进缩减

来源：互联网发布：淘宝千姿女上衣正品编辑：程序博客网时间：2024/05/02 00:20

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FamilyUserAdmin.aspx.cs" Inherits="WebApp_FamilyUserAdmin" %>

<%@ Register Src="~/Controls/APPHead.ascx" TagPrefix="uc1" TagName="APPHead" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<uc1:APPHead runat="server" ID="APPHead" />
<script src="../JS/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../JS/jquery.placeholder.js" type="text/javascript"></script>
<script src="../JS/ShowTips.js" type="text/javascript"></script>
<title>账号管理</title>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="title">
<a href="FamilyMyHome.aspx"><i class="iconfont"></i></a>账号管理</li>
</ul>
<div style="padding-left: 10px; padding-right: 10px;">
<table>
<tr>
<td style="padding-top: 10px;">头像：
</td>
<td style="padding-top: 10px;">
<div>
<asp:Literal ID="LieImgUserName" runat="server"></asp:Literal>
<span><a href="javascript:void(0)" onclick="piazhao()">更改</a></span>

<canvas id="myCanvas" style="display:none;"></canvas>
<input type="file" name="pic" id="input_pai" onchange="uploadPic()" style="display:none;" accept="image/*" />
<asp:HiddenField ID="hfPic" runat="server" Value="" />
<asp:HiddenField ID="hfFlag" Value="false" runat="server" />
<%--<span><a href="javascript:void(0)" onclick="sendImage()">上传</a></span> --%>
</div>
</td>
</tr>

<tr>
<td style="width: 46px; padding-top: 10px;">名字：</td>
<td style="padding-top: 10px;">
<asp:TextBox ID="txtRealName" CssClass="input" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="padding-top: 10px;">性别：</td>
<td style="padding-top: 10px;">
<asp:RadioButton ID="rbSex1" GroupName="sex" runat="server" /> 男   
<asp:RadioButton ID="rbSex2" GroupName="sex" runat="server" /> 女
</td>
</tr>
<tr>
<td style="padding-top: 10px;">昵称：</td>
<td style="padding-top: 10px;">
<asp:TextBox ID="txtUserName" CssClass="input" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="padding-top: 10px;">邮箱：</td>
<td style="padding-top: 10px;">
<asp:TextBox ID="txtEmail" CssClass="input" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="padding-top: 10px;">手机：</td>
<td style="padding-top: 10px;">
<asp:TextBox ID="txtMobile" CssClass="input" runat="server"></asp:TextBox>
</td>
</tr>

</table>
<div style="padding-top: 10px;">
<asp:Button ID="btnSava" runat="server" CssClass="btn" Text="保　　存" OnClientClick="sendImage()" OnClick="btnSava_Click" />
</div>
</div>
</form>
<script type="text/javascript">
function piazhao() {
$("#input_pai").click();
}
function uploadPic() {
init();
}

// 参数，最大高度
var MAX_HEIGHT = 100;
// 渲染
function render(src) {
// 创建一个 Image 对象
var image = new Image();
// 绑定 load 事件处理器，加载完成后执行
image.onload = function () {
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 如果高度超标
if (image.height > MAX_HEIGHT) {
// 宽度等比例缩放 *=
image.width *= MAX_HEIGHT / image.height;
image.height = MAX_HEIGHT;
}
// 获取 canvas的 2d 环境对象,
// 可以理解Context是管理员，canvas是房子
var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到canvas上
ctx.drawImage(image, 0, 0, image.width, image.height);
// !!! 注意，image 没有加入到 dom之中
};
// 设置src属性，浏览器会自动加载。
// 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
image.src = src;
$("#img_pic").attr("src", image.src);
$("#hfFlag").val("true")
};
// 加载图像文件(url路径)
function loadImage(src) {
// 过滤掉非 image 类型的文件
if (!src.type.match(/image.*/)) {
if (window.console) {
console.log("选择的文件类型不是图片: ", src.type);
} else {
window.confirm("只能选择图片文件");
}
return;
}
// 创建 FileReader 对象并调用 render 函数来完成渲染.
var reader = new FileReader();
// 绑定load事件自动回调函数
reader.onload = function (e) {
// 调用前面的 render 函数
render(e.target.result);
};
// 读取文件内容
reader.readAsDataURL(src);

};
// 上传图片，jQuery版
function sendImage() {
if ($("#hfFlag").val() == "true") {
// 获取 canvas DOM 对象
var canvas = document.getElementById("myCanvas");
// 获取Base64编码后的图像数据，格式是字符串
// "data:image/png;base64,"开头,需要在客户端或者服务器端将其去掉，后面的部分可以直接写入文件。
var dataurl = canvas.toDataURL("image/png");
// 为安全对URI进行编码
// data%3Aimage%2Fpng%3Bbase64%2C 开头
var imagedata = encodeURIComponent(dataurl);
//var url = $("#form").attr("action");
// 1. 如果form表单不好处理,可以使用某个hidden隐藏域来设置请求地址
// <input type="hidden" name="action" value="receive.jsp" />
var url = "/Ashx/WebAppUploadPic.ashx";
// 2. 也可以直接用某个dom对象的属性来获取
// <input id="imageaction" type="hidden" action="receive.jsp">
// var url = $("#imageaction").attr("action");
// 因为是string，所以服务器需要对数据进行转码，写文件操作等。
// 个人约定，所有http参数名字全部小写
console.log(dataurl);
//console.log(imagedata);
var data = {
imagename: "myImage.png",
imagedata: imagedata
};

jQuery.ajax({
url: url,
data: data,
type: "POST",
// 期待的返回值类型
dataType: "json",
complete: function (xhr, result) {
if (!xhr) {
ShowTips('网络连接失败!');
return false;
}
var text = xhr.responseText;
if (!text) {
ShowTips('网络错误!');
return false;
}
var json = eval("(" + text + ")");
if (!json) {
ShowTips('解析错误!');
return false;
} else {
$("#hfPic").val(json.pic);
}
}
});
}
};
function init() {
loadImage($('#input_pai')[0].files[0]);
//sendImage()
//setTimeout(, 5000);
};

</script>
</body>
</html>

0 0