bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类 （二） 图片裁剪
图片裁剪参见：
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 图片，然后直接上传，不需要消耗服务器性能。可惜 没有实现。这也是一个负载均衡的问题，也可以考虑一键切换功能。