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 ...

随机推荐

寒假了，想深入学习c++
本来在图书馆借了好几本属,但是,自己没有经验,借的书都太深奥,看不懂,哎,桑心!
RH133读书笔记(5) - Lab 5 User and Group Administration
Lab 5 User and Group Administration Goal: To build skills for user and group administration. Estimat ...
UVa11488-Hyper Prefix Sets（trie树）
H Hyper Prefix Sets Prefix goodness of a set string is length of longest common prefix*number of str ...
PHP訪问MySql数据库 0基础篇
在站点后台,常常要与数据库打交道.本文介绍怎样使用XAMPP来管理MySql数据库及怎样用PHP来訪问MySql数据库. 一．使用XAMPP来管理MySql数据库首先使用XAMPP打开MySql的管 ...
COCOS2D-X FRAME动画创作随笔
CCAnimate继承CCActionInterval,和CCAnimate是一家action,有着action所有的属性和方法. CCAnimate一些重要的方法: static CCAnimate ...
HSV 量化
function L=hsvquan(hsv) %对HSV量化,该3维特征矢量: h=hsv(:,:,1); s=hsv(:,:,2); v=hsv(:,:,3); % 假设对HSV 空间进行适当的量 ...
STL中间set具体用法！！！！
1.关于set C++ STL 之所以得到广泛的赞誉,也被非常多人使用.不仅仅是提供了像vector, string, list等方便的容器,更重要的是STL封装了很多复杂的数据结构算法和大量经常使用 ...
复制（5）——事务复制中的发布者（Publisher）
发布者是所有被复制(replicated)的数据的集合.每个发布者可以有多个发布(publication),每个发布项包含多个项目(articles),但是这些发布必须处于一个单一的数据库中,而每个项 ...
Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
谈话ZooKeeper（一个）分析ZooKeeper的Quorums机制--预防Split-Brain问题
使用ZooKeeper学生们应该看到一个参数.它是ZooKeeper超过一半的群集必须节点(Majority)可用的.外来人才在整个集群中可用.在大多数情况下,这种说法是正确的. 谈论这篇文章背后的原 ...

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

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

随机推荐

热门专题

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

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