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

随机推荐

PHP PDO sqlite ,Unable to Open database file的解决方法
t.php在网站的根目录. fdy.db在inc文件夹下; t.php中sqlite路径写成相对路径 $db = new PDO('sqlite:inc/fdy.db'); 开始提示 Fatal er ...
LatinIME输入法分析
输入法的设置在res/xml/method.xml的<input-method>标签中,主要设置两个属性: android:settingsActivity,输入法的设置程序入口. and ...
iOS 在下面 AOP 程序
iOS 在下面 AOP 程序概念在软件业.AOP对于Aspect Oriented Programming缩写,手段:面向方面的编程.它是一种函数式编程张燕生风扇类型.通过这样一个技术方案功能的预 ...
C#二进制字节数组操作功能拦截字节数组SubByte
C#二进制字节数组操作功能拦截字节数组SubByte /// <summary> /// 截取字节数组 /// </summary> /// <param name=& ...
[译]MVC应用程序生命周期
原文:MVC Application Lifecycle 来一探究竟在MVC应用程序中参与请求处理的各个不同组件. 目录: 序言背景 UrlRoutingModule RouteHandler Mv ...
WebStorm的compass配置
在webstorm中配置compass WebStorm是功能强大的前端开发专用IDE,拥有即时编辑(chrome).自动完成.debugger.Emmet.HTML5 支持.JSLint.Less. ...
Python网络02 Python服务器进化
原文:Python网络02 Python服务器进化作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! **注意,在Python 3. ...
cocos2d-x由Jni实现Java与C++打电话给对方
cocos2d-x由Jni实现Java与C++打电话给对方. cocos2d-x与开发商提供一个类JniHelper,提供java与c++之间的互jni解. 笔者所开发的"史上最坑爹的游戏& ...
UVA 810 - A Dicey Problem(BFS）
UVA 810 - A Dicey Problem 题目链接题意:一个骰子,给你顶面和前面.在一个起点,每次能移动到周围4格,为-1,或顶面和该位置数字一样,那么问题来了,骰子能不能走一圈回到原地, ...
NSIS：简单按钮美化插件SkinButton，支持透明PNG图片。
原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...

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

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

随机推荐

热门专题

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

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