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 ...
随机推荐
- ZOJ3629 Treasure Hunt IV（找到规律，按公式）
Treasure Hunt IV Time Limit: 2 Seconds Memory Limit: 65536 KB Alice is exploring the wonderland ...
- Cocos2d-x 3.0final 终结者系列教程04-引擎架构分析
从前,有一个跟我来Android学生,总是问我: 沉老师,为什么Android的形式被称为Activity,为什么要onCreate方法写setContentView(R.layout.main)? ...
- Git--Submodule使用
项目模板中通常由前端保持,所以每次更新模板.我也要跟着变化项目. 随着时间的推移,这不是一个方法来找到,老这么维护.大型项目,更多的模板,真的很容易管理和维护. 然后头让我用submodule前端资源 ...
- K60 启动过程分析
很高兴老师借给我一K60的开发板,趁着暑假好好鼓捣鼓捣! 有了上图的过程分析我想心里大概有个低了吧! 以下看代码: /* CodeWarrior ARM Runtime Support Library ...
- JUnit使用参数测试和一组测试
JUnit该参数测试和一组测试使用简单 参数测试 作为替代阵列int a0,a1,a2喜欢,当测试加法assertEquals(3.0, h.add(1, 2), 0.1);相当于声明一个变量,要測试 ...
- Hadoop加zookeeper构建高可靠集群
事前准备 1.更改Linux主机名,每个人都有配置 vim /etc/sysconfig/network NETWORKING=yes HOSTNAME=hadoop-server1 2.改动IP / ...
- strtok、strtok_s、strtok_r 字符串切割函数
1.strtok函数 函数原型:char * strtok (char *str, const char * delimiters); 參数:str,待切割的字符串(c-string):delimit ...
- nodejs使用connect-mongodb报错（Please ensure that you set the default write concern）
原本是使用connect-mongo的,可能是express版本号的升级报错了.改用connect-mongodb.可是使用后出现了例如以下的警告: G:\nodejs\moviesite>gr ...
- IT薪酬
新加坡IT薪酬 2014-06-12 12:51 by 圣殿骑士, 8856 阅读, 37 评论, 收藏, 编辑 很多朋友发邮件或留言问我关于新加坡IT薪酬的问题,由于前段时间比较忙,所以没有及时一一 ...
- SQL 注意事项
-------选择表名 配置Ctrl+3 能够select * 桌 USE [NB] GO /* 物: StoredProcedure [dbo].[SP_Select] 脚本日期: 05/28/20 ...