实现图像剪裁 jquery.Jcrop
配合 jquery.Jcrop 实现上传图片进行剪裁保存功能
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
jQuery(function ($) {
//target是<img>的id
jQuery('#target').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
}); function showCoords(c) {
jQuery('#x').val(c.x); //x起点坐标
jQuery('#y').val(c.y);
jQuery('#x2').val(c.x2);//x终点坐标
jQuery('#y2').val(c.y2);
jQuery('#w').val(c.w);
jQuery('#h').val(c.h);
};
</script>
后台代码
/// <summary>
/// 剪裁图像
/// </summary>
/// <param name="Img">原图物理地址</param>
/// <param name="Width">新图宽度</param>
/// <param name="Height">新图高度</param>
/// <param name="X">绘制起点X轴</param>
/// <param name="Y">绘制起点Y轴</param>
/// <returns></returns>
private byte[] Crop(string Img, int Width, int Height, int X, int Y)
{
try
{
using (var OriginalImage = new Bitmap(Img))
{
using (var bmp = new Bitmap(Width, Height, OriginalImage.PixelFormat))
{
bmp.SetResolution(OriginalImage.HorizontalResolution, OriginalImage.VerticalResolution);
using (Graphics Graphic = Graphics.FromImage(bmp))
{
Graphic.SmoothingMode = SmoothingMode.AntiAlias;//设置高质量,低速度呈现平滑程度
Graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;//设置高质量插值法
Graphic.Clear(Color.Transparent);//清空画布并以透明背景色填充
Graphic.PixelOffsetMode = PixelOffsetMode.HighQuality;
Graphic.DrawImage(OriginalImage, new Rectangle(0, 0, Width, Height), X, Y, Width, Height,
GraphicsUnit.Pixel);
方法一
bmp.Save(Server.MapPath("上传裁剪") + "new.jpg", System.Drawing.Imaging.ImageFormat.Jpeg);//图片另存
方法二 //转换二进制流
var ms = new MemoryStream();
bmp.Save(ms, OriginalImage.RawFormat); return ms.GetBuffer();
}
}
}
}
catch (Exception Ex)
{
throw (Ex);
}
}
实现图像剪裁 jquery.Jcrop的更多相关文章
- 基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
- jQuery Jcrop 图像裁剪
jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...
- 结合canvas和jquery.Jcrop.js裁切图像上传图片
1.引入的外部资源: jquery.Jcrop.css.jquery.Jcrop.js.upimg.js 2.使用的页面元素 @* 选择照片 *@ <div class="line&q ...
- jQuery Jcrop API参数说明(中文版)(转)(图片剪切)
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- 插件介绍 :cropper是一款使用简单且功能强大的图片剪裁jQuery插件。
简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...
- struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
- 调用jquery.Jcrop.min.js 切割图片 实例
需求是:上传一个图片,然后将上传的这个图片进行切割........ 首先是jsp页面.页面需要引入js <script src="${fileUrlPrx}/scripts/wap/ ...
- jQuery JCrop插件的使用详解
jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件 1.最基本的使用方法: &l ...
- jQuery 图像裁剪插件Jcrop
, // 设置框的最大宽度 setSelect: [ 175, 100, 400, 300 ] }); $('#text-input ...
随机推荐
- BZOJ 4990 [USACO17FEB] Why Did the Cow Cross the Road II P (树状数组优化DP)
题目大意:给你两个序列,你可以两个序列的点之间连边 要求:1.只能在点权差值不大于4的点之间连边 2.边和边不能相交 3.每个点只能连一次 设表示第一个序列进行到 i,第二个序列进行到 j,最多连的边 ...
- Centos 6/7 忘记root密码处理方法
1. centos 6.x 重置root密码 开机按esc 到下图 按 e 键进入编辑模式,通常选择第二项后按 e 键编辑此项 进入该编辑模式后,在quiet后面输入 simple 或者 1 然后回 ...
- 小试牛刀之sort()排序的实现
受大学室友的鼓动,我也打算利用公众平台来记录自己的前端知识积累,同时呢,自己总结的东西,总归会有局限性,希望小伙伴能给我指点迷津.知识就是一张巨大的网,作为一名摸不清头绪的入学者,唯一能做的事情就是吐 ...
- QT_圆_直线_三角t
MyImgTest.h: #ifndef MYIMGTEST_H#define MYIMGTEST_H #include <QWidget> class MyImgTest : publi ...
- 【【henuacm2016级暑期训练】动态规划专题 M】Little Pony and Harmony Chest
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每一位显然只要取1..60这些数字. 然后需要保证每个这些数字里面,每个数字所用到的质因子都它所唯一拥有的.别人不能用 因为如果别人 ...
- 【codeforces 229C】Triangles
[题目链接]:http://codeforces.com/problemset/problem/229/C [题意] 给你一张完全图; 然后1个人从中选择m条边; 然后另外一个人从中选择剩余的n*(n ...
- POJ——T 3159 Candies
http://poj.org/problem?id=3159 Time Limit: 1500MS Memory Limit: 131072K Total Submissions: 33328 ...
- Detours改动段属性漏洞
v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VM ...
- 低效能的”where1=1”
网上有不少人提出过类似的问题:"看到有人写了where 1=1这种sql,究竟是什么意思?".事实上使用这种使用方法的开发者一般都是在使用动态数组的sql. 让我们想象例如以下的场 ...
- 轻松学习JavaScript十七:JavaScript的BOM学习(二)
JavaScript计时事件 通过使用JavaScript中的BOM对象中的window对象的两个方法就是setTimeout()方法和claerTimeout()方法,我们 有能力作到在一个设定的时 ...