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

随机推荐

POJ 2217 Secretary (后缀数组)
标题效果: 计算两个公共串串最长的字符串的长度. IDEAS: 这两个组合的字符串. 然后直接确定运行后缀数组height 然后,你可以直接扫描一次height .加个是不是在一个串中的推断就能够了. ...
IOS 多于UIImageView 当加载较大的高清闪存管理
当我们是一家人View 多于UIImageView,和UIImageView表明一个更大的HD,可能存在的存储器的警告的问题.假设第一次走进这个view,无记忆出现预警.当重新进入view,在那曾经 ...
Android - 除首次使用状态(SharedPreferences)
除首次使用状态(SharedPreferences) 本文地址: http://blog.csdn.net/caroline_wendy 用户首次登陆时, 可能须要用户教育, 解说界面操作, 可是不应 ...
中文乱码？不，是 HTML 实体编码！(转)
在如何用 Nodejs 分析一个简单页面一文中,我们爬取了博客园首页的 20 篇文章标题,输出部分拼接了一个字符串: var $ = cheerio.load(sres.text); var an ...
SERVERCONFIG
-- Create tablecreate table ERP_SERVERCONFIG( id NUMBER not null, servicename VARCHAR2(500), service ...
css3 的box-sizing属性理解
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...
使用log4j日志-配置载入问题
1.在eclipse中,把log4j.properties放在类路径下,在项目启动时就会自己主动载入. 2.在idea中.把log4j.properties放在类路径下,可是项目启动时不能直接载入(原 ...
Mac周边环境 goBASIC语言HelloWorld
1. 安装mercurial Mercurial 是一种轻量级分布式版本号控制系统,採用 Python 语言实现能够输入hg命令查询系统是否安装mercurial,能够例如以下两种命令安装 $sud ...
（大数据工程师学习路径）第一步 Linux 基础入门----用户及文件权限管理
用户及文件权限管理实验介绍 1.Linux 中创建.删除用户,及用户组等操作. 2.Linux 中的文件权限设置. 一.Linux 用户管理 Linux 是一个可以实现多用户登陆的操作系统,比如“李 ...
Linux netstat订购具体解释
简单介绍 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics).masquerade 连接.多播成员 (Multicast Memb ...

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

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

随机推荐

热门专题

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

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