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

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

bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...
C#——图片操作类简单封装
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Dr ...
Android应用程序开发之图片操作（二）——工程图片资源的加载及OOM的处理
(一)工程图片资源的加载方法在Android应用程序开发之图片操作(一)中,详细说明了如何操作各种资源图片,只是有的没有附上示例代码,在此,我将针对项目工程中的图片资源的显示加载进行说明.官方说明, ...
php 图片操作类,支持生成缩略图,添加水印,上传缩略图
<?php class Image { //类开始 public $originimage = ""; //源图片文件地址 public $image ...
bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类（三）图片裁剪
官方的例子是长方形的. 我这里用于正方形的头像所以做如下修改 #preview-pane .preview-container { width: 73px; height: 73px ...
IO流操作-图片操作（二）
一:Stream和Byte的含义 Stream:流,一般指文件流,内存流,可读的流和可写的流等,是一种数据转换的格式,流在计算机里可以表示为流输入或输出的一个连续的字节序列,它在使用完后,需要把资源释 ...
C#获取CPU与网卡硬盘序列号及Base64和DES加密解密操作类
public class RegisterHelp { /// <summary> /// CPU /// </summary> /// <returns>< ...
java常用开发工具类之图片水印，文字水印，缩放，补白工具类
import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphic ...
微信小程序之图片base64解码
不知道大家在做微信小程序的时候遇到base64解码的问题,我之前在做微信小程序的时候遇到base64解析图片一直有问题,所以在这里把遇到的问题和解决方案在这里记录一下: 在平时的项目中我们是直接用ba ...

随机推荐

【软件使用技巧】PL/SQL Developer实现双击table询
二手plsql都知道,在表名默认双击[开展/关闭]. 习惯了MySql Workbench要么Sqlserver Management Studio无法适应其他管理工具. 直接在溶液: Tools - ...
如何设置ubuntu自己主动的睡眠时间
我相信很多在学习linux的过程中.总会遇到,不时系统会冬眠自己主动,因此,即使再次输入password.么重要的内容怕别人看另外假设你常常使用像Putty这样子的远程登录软件的话,假设你的linu ...
java中三种常见内存溢出错误的处理方法（good）
相信有一定java开发经验的人或多或少都会遇到OutOfMemoryError的问题,这个问题曾困扰了我很长时间,随着解决各类问题经验的积累以及对问题根源的探索,终于有了一个比较深入的认识. 在解决j ...
Android docs4.3API
查找在线课程,加速进入Android docs API,最主要的原因是网上加载js文件速度慢,另一种是装google字体缓慢! import java.io.BufferedReader; impor ...
js 自己容易搞混的笔记查询
相似的操作 var str2 = "0123456789"; console.log(str2.slice(4,7)); //------------"456" ...
Tempdb怎么会成为性能瓶颈
原文:Tempdb怎么会成为性能瓶颈转自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/25/tempdb.aspx 我曾经遇到过这样一个性能问题. ...
RandomAccessFile实时读取大文件（转）
最近有一个银行数据漂白系统,要求操作人员在页面调用远端Linux服务器的shell,并将shell输出的信息保存到一个日志文件,前台页面要实时显示日志文件的内容.这个问题难点在于如何判断哪些数据是新增 ...
有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
cuda vector addition
http://webgpu.hwu.crhc.illinois.edu/ // MP 1 #include <wb.h> __global__ void vecAdd(float * in ...
nodejs中使用monk訪问mongodb
mongodb 安装mongodb 我认为还是用mannual install靠谱一点儿:http://docs.mongodb.org/manual/tutorial/install-mongodb ...

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

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

随机推荐

热门专题

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

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