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

时间：2022-11-21 06:11:15

图片裁剪参见：

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="" 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[];

        boundy = bounds[];

        // 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) > ) {

          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[];

      //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件

      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")[].parentNode.clientWidth - );

        $("#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: ;

      top: 10px;

      right: -100px;

      padding: 6px;

      border: 1px rgba(,,,.) solid;

      background-color: white;

      -webkit-border-radius: 6px;

      -moz-border-radius: 6px;

      border-radius: 6px;

      -webkit-box-shadow: 1px 1px 5px 2px rgba(, , , 0.2);

      -moz-box-shadow: 1px 1px 5px 2px rgba(, , , 0.2);

      box-shadow: 1px 1px 5px 2px rgba(, , , 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="" 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")[] && $("body")[].clientHeight>) {

    window.parent.$("#HeadImg_iframe")[].height = $("body")[].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 图片，然后直接上传，不需要消耗服务器性能。可惜 没有实现。这也是一个负载均衡的问题，也可以考虑一键切换功能。

相关文章