图片裁剪参见：

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 页面。

第一个页面是个人中心，用来编辑个人信息的：

部分代码如下：

  1. <div class="row pad">
  2.             <div class="col-md-3">
  3.             </div>
  4.             <div class="col-md-1">
  5.               头像
  6.             </div>
  7.             <div class="col-md-7">
  8.  
  9.               <iframe style="width: 100%; border: none;" height="" src="PersonalCenter_HeadImg.aspx" id="HeadImg_iframe"></iframe>
  10.             </div>
  11.  
  12.           </div>

第二个页面：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonalCenter_HeadImg.aspx.cs" Inherits="KT_Product_Show_V3.PersonalCenter_HeadImg" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7.   <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  8.   <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  9.   <script src="js/jquery.min.js"></script>
  10.   <script src="plug/tapmodo-Jcrop/js/jquery.Jcrop.js"></script>
  11.   <script type="text/javascript">
  12.     var Temp;
  13.     jQuery(function ($) {
  14.       // Create variables (in this scope) to hold the API and image size
  15.       var jcrop_api,
  16.          boundx,
  17.          boundy,
  18.  
  19.       // Grab some information about the preview pane
  20.          $preview = $('#preview-pane'),
  21.          $pcnt = $('#preview-pane .preview-container'),
  22.          $pimg = $('#preview-pane .preview-container img'),
  23.  
  24.          xsize = $pcnt.width(),
  25.          ysize = $pcnt.height();
  26.  
  27.       console.log('init', [xsize, ysize]);
  28.       $('#target').Jcrop({
  29.         onChange: updatePreview,
  30.         onSelect: updatePreview,
  31.         aspectRatio: xsize / ysize
  32.       }, function () {
  33.         // Use the API to get the real image size
  34.         var bounds = this.getBounds();
  35.         boundx = bounds[];
  36.         boundy = bounds[];
  37.         // Store the API in the jcrop_api variable
  38.         jcrop_api = this;
  39.         Temp = this;
  40.         // Move the preview into the jcrop container for css positioning
  41.         $preview.appendTo(jcrop_api.ui.holder);
  42.       });
  43.  
  44.       function updatePreview(c) {
  45.         if (parseInt(c.w) > ) {
  46.           var rx = xsize / c.w;
  47.           var ry = ysize / c.h;
  48.  
  49.           $pimg.css({
  50.             width: Math.round(rx * boundx) + 'px',
  51.             height: Math.round(ry * boundy) + 'px',
  52.             marginLeft: '-' + Math.round(rx * c.x) + 'px',
  53.             marginTop: '-' + Math.round(ry * c.y) + 'px'
  54.           });
  55.         }
  56.       };
  57.  
  58.     });
  59.  
  60.   </script>
  61.   <script>
  62.     window.onload = function () {
  63.       var input = document.getElementById("demo_input");
  64.       var result = document.getElementById("result");
  65.       var img_area = document.getElementById("img_area");
  66.       if (typeof (FileReader) === 'undefined') {
  67.         result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
  68.         input.setAttribute('disabled', 'disabled');
  69.       } else {
  70.         input.addEventListener('change', readFile, false);
  71.       }
  72.     }
  73.     function readFile() {
  74.       var file = this.files[];
  75.       //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
  76.       if (!/image\/\w+/.test(file.type)) {
  77.         alert("请确保文件为图像类型");
  78.         return false;
  79.       }
  80.       var reader = new FileReader();
  81.       reader.readAsDataURL(file);
  82.       reader.onload = function (e) {
  83.         $("#maxWidth").val(window.parent.$("#HeadImg_iframe")[].parentNode.clientWidth - );
  84.         $("#hid").val(this.result)
  85.         $("#form1").submit();
  86.  
  87.         //   $("#result").val(this.result);
  88.         //  $("#target")[0].src = this.result;
  89.         //  $("#target")[0].src = this.result;
  90.  
  91.       }
  92.     }
  93.  
  94.   </script>
  95.   <link href="plug//tapmodo-Jcrop/demos/demo_files/main.css" rel="stylesheet" />
  96.   <link href="plug//tapmodo-Jcrop/demos/demo_files/demos.css" rel="stylesheet" />
  97.   <link href="plug//tapmodo-Jcrop/css/jquery.Jcrop.css" rel="stylesheet" />
  98.   <style type="text/css">
  99.     .jcrop-holder #preview-pane {
  100.       display: block;
  101.       position: absolute;
  102.       z-index: ;
  103.       top: 10px;
  104.       right: -100px;
  105.       padding: 6px;
  106.       border: 1px rgba(,,,.) solid;
  107.       background-color: white;
  108.       -webkit-border-radius: 6px;
  109.       -moz-border-radius: 6px;
  110.       border-radius: 6px;
  111.       -webkit-box-shadow: 1px 1px 5px 2px rgba(, , , 0.2);
  112.       -moz-box-shadow: 1px 1px 5px 2px rgba(, , , 0.2);
  113.       box-shadow: 1px 1px 5px 2px rgba(, , , 0.2);
  114.     }
  115.  
  116.     #preview-pane .preview-container {
  117.       width: 73px;
  118.       height: 73px;
  119.       overflow: hidden;
  120.     }
  121.   </style>
  122.  
  123. </head>
  124. <body>
  125.   <div class="btn-group">
  126.     <button class="btn btn-default" onclick="javascript: $('#demo_input').click()" type="button">选择图片</button>
  127.   </div>
  128.   <input type="file" style="display: none" value="" id="demo_input" />
  129.  
  130.   <div id="img_area"></div>
  131.   <div class="">
  132.     <%--container--%>
  133.     <div class="">
  134.       <%--row--%>
  135.       <div class="">
  136.         <%--span12--%>
  137.         <div class="jc-demo-box" style="padding: 0px;">
  138.  
  139.           <img src="" runat="server" id="target" alt="" />
  140.  
  141.           <div id="preview-pane">
  142.             <div class="preview-container">
  143.  
  144.               <img src="" runat="server" id="target002" class="jcrop-preview" alt="" />
  145.             </div>
  146.           </div>
  147.  
  148.           <div class="description">
  149.           </div>
  150.  
  151.           <div class="clearfix"></div>
  152.  
  153.         </div>
  154.       </div>
  155.     </div>
  156.   </div>
  157.  
  158.   <form id="form1" runat="server">
  159.     <div>
  160.  
  161.       <input type="hidden" name="hid" id="hid" />
  162.       <input type="hidden" name="maxWidth" value="" id="maxWidth" />
  163.     </div>
  164.  
  165.     <%--<asp:Button ID="Button1" runat="server" Text="Button"></asp:Button>--%>
  166.   </form>
  167. </body>
  168. <script>
  169.   //  var r = window.parent.$("#HeadImg_iframe")[0].parentNode.clientWidth;
  170.   if (window.parent.$("#HeadImg_iframe")[] && $("body")[].clientHeight>) {
  171.     window.parent.$("#HeadImg_iframe")[].height = $("body")[].clientHeight;
  172.   }
  173.  
  174. //  Temp.setSelect(0,0,200,200);
  175. </script>
  176. </html>
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using KT_Product_Show_V3.Controllers;
  8.  
  9. namespace KT_Product_Show_V3
  10. {
  11.   public partial class PersonalCenter_HeadImg : System.Web.UI.Page
  12.   {
  13.     protected void Page_Load(object sender, EventArgs e)
  14.     {
  15.       if (Request.Form["hid"] != null)
  16.       {
  17.         int maxWidth = int.Parse(Request.Form["maxWidth"].ToString());
  18.         string Img_url = ImageTool.DescripttionDecodeCutMaxWidth(Request.Form["hid"].ToString(), maxWidth);
  19.         target.Attributes.Add("src", Img_url);
  20.         target002.Attributes.Add("src", Img_url);
  21.         // Response.Write(Request.Form["hid"].ToString());
  22.       }
  23.     }
  24.   }
  25. }

本来是打算实现 客户端 裁剪 直接 生成 base64 图片，然后直接上传，不需要消耗服务器性能。可惜 没有实现。这也是一个负载均衡的问题，也可以考虑一键切换功能。

bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类 （二） 图片裁剪的更多相关文章

  1. bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...

  2. C#——图片操作类简单封装

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...

  3. Android应用程序开发之图片操作（二）——工程图片资源的加载及OOM的处理

    (一)工程图片资源的加载方法 在Android应用程序开发之图片操作(一)中,详细说明了如何操作各种资源图片,只是有的没有附上示例代码,在此,我将针对项目工程中的图片资源的显示加载进行说明.官方说明, ...

  4. php 图片操作类,支持生成缩略图,添加水印,上传缩略图

    <?php class Image {     //类开始     public $originimage = ""; //源图片文件地址     public $image ...

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

    官方的例子 是 长方形的. 我这里 用于 正方形的头像 所以  做如下  修改 #preview-pane .preview-container { width: 73px; height: 73px ...

  6. IO流操作-图片操作（二）

    一:Stream和Byte的含义 Stream:流,一般指文件流,内存流,可读的流和可写的流等,是一种数据转换的格式,流在计算机里可以表示为流输入或输出的一个连续的字节序列,它在使用完后,需要把资源释 ...

  7. C#获取CPU与网卡硬盘序列号及Base64和DES加密解密操作类

    public class RegisterHelp { /// <summary> /// CPU /// </summary> /// <returns>< ...

  8. java常用开发工具类之 图片水印，文字水印，缩放，补白工具类

    import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...

  9. 微信小程序之图片base64解码

    不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ...

随机推荐

  1. 对比Windows 8模拟器(Simulator)和Windows Phone仿真器(Emulator)

    原文:对比Windows 8模拟器(Simulator)和Windows Phone仿真器(Emulator) 从事移动应用开发,经常会用到模拟器(Simulator)和仿真器(Emulator),本 ...

  2. 基于nodejs 的微信 JS-SDK 简单应用

    2015 是 Hybrid App 崛起之年 ,Web App 和 Native App 各有其强大之处,也有着致命的缺点,人们一边追求native流畅的用户体验,一边同时期望产品能够快速的迭代更新, ...

  3. ProducerConsumerDemo

    package algorithm; public class ProducerConsumer { public static void main(String[] args) { SyncStac ...

  4. 【Leetcode】Partition List (Swap)

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  5. 数据结构（C达到）------- 双链表

    双链表中的每个节点包含两个指针域,指针域包含其后继节点的内存地址,还有一个指针所存储的存储器地址其领域前驱节点. 双向链表结点的类型描写叙述: //双向链表的类型描写叙述 typedef int El ...

  6. 定向爬虫之爬一爬各个学校新闻的认识（【1】对Url的认识）

    昨天早上,我习惯性的打开博客园,看一看别人的写的博客.突然想起,自己好像没有写过什么博客,所以就心血来潮,把我现在做得事情写出来, 这也是对我目前的学习的一种总结.望大神指点.... 对于一间学校的新 ...

  7. COCOFrame

    COCOFrame它是一个轻量级的开发框架,综合Android APP开发过程中经常使用的工具,方法,特效.当中F类採用的AndroidQuery实现,做了进一步的封装及部分优化. 1. Jar包大小 ...

  8. Cocos2d-x源代码解析（1）——地图模块（3）

    接上一章<Cocos2d-x源代码解析(1)--地图模块(2)> 通过前面两章的分析,我们能够知道cocos将tmx的信息结构化到 CCTMXMapInfo.CCTMXTilesetInf ...

  9. Sqlite学习笔记(四)&&SQLite-WAL原理（转）

    Sqlite学习笔记(三)&&WAL性能测试中列出了几种典型场景下WAL的性能数据,了解到WAL确实有性能优势,这篇文章将会详细分析WAL的原理,做到知其然,更要知其所以然. WAL是 ...

  10. .NET单元测试艺术(1) - 单元测试的基本知识

    List 1.1 一个要测试的SimpleParser类 using System; namespace AOUT.CH1.Examples { public class SimpleParser { ...