bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类（二）图片裁剪

浏览数：62 / 时间：2015年06月09日

图片裁剪参见：

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());
      }
    }
  }
}