实现图像剪裁 jquery.Jcrop
jQuery 实现 图像
2023-09-27 14:19:43 时间
配合 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开发之Ajax
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式改动提交相应的那一行的改动内容。
- jquery如何实现自动打开第一个链接!(实例代码)
- jQuery实现表格行的删除和增加(1+X Web前端开发初级 例题)
- jQuery技术内幕:深入解析jQuery架构设计与实现原理. 2.7 原型属性和方法
- jquery实现图片切换
- 原生JS取代一些JQuery方法的简单实现
- -第3章 jQuery方法实现下拉菜单显示和隐藏
- jQuery 实现带下拉提示且自动填充的邮箱
- 《jQuery Mobile入门经典》—— 1.1 为什么要使用jQuery Mobile
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第3章 修改页面 3.1 技巧:添加类
- Jquery插件写法及extentd函数
- 使用jQuery.form插件,实现完美的表单异步提交【转发】
- jQuery实现页面锚点滚动效果
- css3实现jquery mobile的页面过度原理
- jquery 实现各种统计图网址
- Python学习---基于JQuery的Ajax实现[快捷+底层$.ajax]
- JQuery采纳CSS实现DOM显示和隐藏要素