图片裁剪参见：
http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail 一个js插件
http://www.mikesdotnetting.com/article/95/upload-and-crop-images-with-jquery-jcrop-and-asp-net 一个外国人写的例子，基于 asp.net webform 的。别人 在 2009 年 写的啊，我却在 2014年 才使用。
一共2个aspx 页面。
第一个页面是个人中心，用来编辑个人信息的：
部分代码如下：
<div class="row pad">
<div class="col-md-3">
</div>
<div class="col-md-1">
头像
</div>
<div class="col-md-7">
<iframe style="width: 100%; border: none;" height="250" src="PersonalCenter_HeadImg.aspx" id="HeadImg_iframe"></iframe>
</div>
</div>
第二个页面：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonalCenter_HeadImg.aspx.cs" Inherits="KT_Product_Show_V3.PersonalCenter_HeadImg" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="js/jquery.min.js"></script>
<script src="plug/tapmodo-Jcrop/js/jquery.Jcrop.js"></script>
<script type="text/javascript">
var Temp;
jQuery(function ($) {
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $(‘#preview-pane‘),
$pcnt = $(‘#preview-pane .preview-container‘),
$pimg = $(‘#preview-pane .preview-container img‘),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log(‘init‘, [xsize, ysize]);
$(‘#target‘).Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
}, function () {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
Temp = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.css({
width: Math.round(rx * boundx) + ‘px‘,
height: Math.round(ry * boundy) + ‘px‘,
marginLeft: ‘-‘ + Math.round(rx * c.x) + ‘px‘,
marginTop: ‘-‘ + Math.round(ry * c.y) + ‘px‘
});
}
};
});
</script>
<script>
window.onload = function () {
var input = document.getElementById("demo_input");
var result = document.getElementById("result");
var img_area = document.getElementById("img_area");
if (typeof (FileReader) === ‘undefined‘) {
result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
input.setAttribute(‘disabled‘, ‘disabled‘);
} else {
input.addEventListener(‘change‘, readFile, false);
}
}
function readFile() {
var file = this.files[0];
//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
if (!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$("#maxWidth").val(window.parent.$("#HeadImg_iframe")[0].parentNode.clientWidth - 185);
$("#hid").val(this.result)
$("#form1").submit();
// $("#result").val(this.result);
// $("#target")[0].src = this.result;
// $("#target")[0].src = this.result;
}
}
</script>
<link href="plug//tapmodo-Jcrop/demos/demo_files/main.css" rel="stylesheet" />
<link href="plug//tapmodo-Jcrop/demos/demo_files/demos.css" rel="stylesheet" />
<link href="plug//tapmodo-Jcrop/css/jquery.Jcrop.css" rel="stylesheet" />
<style type="text/css">
.jcrop-holder #preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -100px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#preview-pane .preview-container {
width: 73px;
height: 73px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="btn-group">
<button class="btn btn-default" onclick="javascript: $(‘#demo_input‘).click()" type="button">选择图片</button>
</div>
<input type="file" style="display: none" value="" id="demo_input" />
<div id="img_area"></div>
<div class="">
<%--container--%>
<div class="">
<%--row--%>
<div class="">
<%--span12--%>
<div class="jc-demo-box" style="padding: 0px;">
<img src="" runat="server" id="target" alt="" />
<div id="preview-pane">
<div class="preview-container">
<img src="" runat="server" id="target002" class="jcrop-preview" alt="" />
</div>
</div>
<div class="description">
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<form id="form1" runat="server">
<div>
<input type="hidden" name="hid" id="hid" />
<input type="hidden" name="maxWidth" value="0" id="maxWidth" />
</div>
<%--<asp:Button ID="Button1" runat="server" Text="Button"></asp:Button>--%>
</form>
</body>
<script>
// var r = window.parent.$("#HeadImg_iframe")[0].parentNode.clientWidth;
if (window.parent.$("#HeadImg_iframe")[0] && $("body")[0].clientHeight>400) {
window.parent.$("#HeadImg_iframe")[0].height = $("body")[0].clientHeight;
}
// Temp.setSelect(0,0,200,200);
</script>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using KT_Product_Show_V3.Controllers;
namespace KT_Product_Show_V3
{
public partial class PersonalCenter_HeadImg : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.Form["hid"] != null)
{
int maxWidth = int.Parse(Request.Form["maxWidth"].ToString());
string Img_url = ImageTool.DescripttionDecodeCutMaxWidth(Request.Form["hid"].ToString(), maxWidth);
target.Attributes.Add("src", Img_url);
target002.Attributes.Add("src", Img_url);
// Response.Write(Request.Form["hid"].ToString());
}
}
}
}
本来是打算实现 客户端 裁剪 直接 生成 base64 图片，然后直接上传，不需要消耗服务器性能。可惜 没有实现。这也是一个负载均衡的问题，也可以考虑一键切换功能。
时间： 2024-07-30 09:21:20