图片切割系统_图片切片工具

图片切割系统_图片切片工具上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下:首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下:
首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理(上传文件不在本次讨论范围,请自行修改);
还有是通过客户端传递的参数来处理图片,确实能得到展示图或预览图的效果(这是针对有些提出在后台处理的图片得不到预览图的效果来说的),下面会举例说明如何生成展示图那样的图片。

程序说明

【客户端部分】

客户端部分详细请参考图片切割效果(建议没有看过的先看那里的例子),这里说说要传递到后台的参数,建议用GetPos获取部分参数:

var
 p 
=
 ic.Url, o 
=
 ic.GetPos();

=
 o.Left,

=
 o.Top,

=
 o.Width,

=
 o.Height,
pw 

=
 ic._layBase.width,
ph 

=
 ic._layBase.height;

其中,ic.Url是图片地址:ic.Url,o.Left是水平切割,o.Top是垂直切割点,o.Width是切割宽度,o.Height是切割高度,ic._layBase.width是图片宽度,ic._layBase.height是图片高度。

可以这样传递这些参数:

$(

imgCreat

).src 
=
 

ImgCropper.ashx?p=

 
+
 p 
+
 

&x=

 
+
 x 
+
 

&y=

 
+
 y 
+
 

&w=

 
+
 w 
+
 

&h=

 
+
 h 
+
 

&pw=

 
+
 pw 
+
 

&ph=

 
+
 ph 
+
 

&

 
+
 Math.random();

其中图片地址、图片宽度、图片高度如果是预先设定好的话就可以不传递了。

【后台部分】

后台主要是进行图片的处理和输出。

【图片切割】

在后台获取前台传递的参数:

图片切割系统_图片切片工具
图片切割系统_图片切片工具
Code

然后就用这些参数对图片进行切割了,先说说切割的原理,主要分两部:切割和缩放。

切割和缩放的程序关键在这里:

gbmPhoto.DrawImage(imgPhoto, 
new
 Rectangle(
0

0
, CutWidth, CutHeight), PointX 
*
 imgPhoto.Width 
/
 PicWidth, PointY 
*
 imgPhoto.Height 
/
 PicHeight, CutWidth 
*
 imgPhoto.Width 
/
 PicWidth, CutHeight 
*
 imgPhoto.Height 
/
 PicHeight, GraphicsUnit.Pixel);

首先是在原图切割出需要的部分。切割需要的参数是PointX、PointY、CutWidth、CutHeight,因为在客户端的程序中是可以缩放原图来进行切割的,所以要在在切割原图时需要先按比例缩放这些参数,还要注意PointX和CutWidth需要水平方向的比例,PointY和CutHeight需要垂直方向的比例。例如(其中imgPhoto是原图):
水平切割点:PointX * imgPhoto.Width / PicWidth;
切割宽度:CutWidth * imgPhoto.Width / PicWidth;
垂直切割点:PointY * imgPhoto.Height / PicHeight;
切割高度:CutHeight * imgPhoto.Height / PicHeight。

用这些参数就可以对原图进行切割了。

然后是缩放原图。可以想象,当切割好原图后,只要把图宽高缩放到CutWidth和CutHeight就可以得到跟展示图一样的图片了:

new
 Rectangle(
0

0
, CutWidth, CutHeight), 

下面是处理图片的程序:

图片切割系统_图片切片工具
图片切割系统_图片切片工具
Code

当然对于不同的需求可能要生成的效果也不一样,但只要能灵活运用对于一般的需求基本都能实现了。
如果需要保存图片到服务器,那么可以用下面的方法保存图片:

bmPhoto.Save(文件物理路径, System.Drawing.Imaging.ImageFormat.Jpeg);

【IHttpHandler】

程序通过ashx文件用IHttpHandler发送切割生成的图片,参考使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法
“利用.ashx文件是一个更好的方法,这个文件类似于.aspx文件,可以通过它来调用HttpHandler类,从而免去了普通.aspx页面的控件解析以及页面处理的过程。这个文件特别适合于生成动态图片,生成动态文本等内容。”

最后设置数据输出类型context.Response.ContentType,并使用context.Response.OutputStream向客户端输出图片数据:

context.Response.ContentType 
=
 

image/jpeg

;
ResetImg(System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(context.Response.OutputStream);

这个输出数据的方法适合用在不需要回发的数据输出中,例如ajax、动态图片等,关于这方面更详细的内容请看IHttpHandler接口

下面是完整服务器端代码:

图片切割系统_图片切片工具
图片切割系统_图片切片工具
Code

各位有什么建议或意见欢迎留言讨论,由于涉及后台操作,请下载完整实例测试。

下载完整测试实例(.net版本)
下载完整测试实例(asp版本)

ps:实例中没有加入图片,测试时请自己插入一张图片(默认是1.jpg)。
ps2:应要求把asp版本加上了,但需要支持aspjpeg组件。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166980.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • http请求报400报错

    http请求报400报错400是HTTP的状态码,主要有两种形式:1、badrequest意思是“错误的请求”;2、invalidhostname意思是“不存在的域名”。在ajax请求后台数据时有时会报HTTP400错误-请求无效(Badrequest);出现这个请求无效报错说明请求没有进入到后台服务里;1、确认发送的数据格式是否正确。调试查看你发送的数据格式是否正确或是否有乱码…

  • 最短路径-Floyd算法的matlab实现.md「建议收藏」

    最短路径-Floyd算法的matlab实现.md「建议收藏」最短路径-Floyd算法的matlab实现​ 弗洛伊德算法是解决任意两点间的最短路径的一种算法,可以正确处理有向图或有向图或负权(但不可存在负权回路)的最短路径问题。​ 在Floyd算法中一般有两个矩阵,一个距离矩阵D,一个路由矩阵R,其中距离矩阵用于存储任意两点之间的最短距离,而路由矩阵则记录任意两点之间的最短路径信息。其思想是:如果可以从一个点进行中转,就进行比较从这个点中转和不中转的距…

  • google gis_系统数据交互图

    google gis_系统数据交互图转载自http://www.cnblogs.com/yinxiangpei/articles/2574502.html,仅用作资料保存 在地理行业中,项目前期规划都会涉及遥感图像,更高级一点的是建立研究区的三维模型。在实践中,笔者对这一些常见的疑问进行了总结,包括如下几个方面。   1、 如何把ArcGIS的数据导入到GoogleEarth中;   2、 如何把Googl

  • 基于FreeBSD与Fetion.py,nagios的飞信告警系统

    基于FreeBSD与Fetion.py,nagios的飞信告警系统

  • ldap统一用户认证php,Docker搭建OpenLDAP+phpLDAPadmin统一用户认证的方法「建议收藏」

    一、背景使用LDAP对运维相关用户名密码做统一管理。可以实现一个帐号登录多个不同系统。手动部署都是各种问题,后来采用Docker部署,参考了好多教程文档总结如以下内容亲测可用二、部署Docker搭建LDAP#拉取镜像dockerpullosixia/openldap:1.3.0#创建并进入映射目录mkdir-p/usr/local/ldap&&cd/usr/…

  • Android Hook技术详解

    Android Hook技术详解代理模式详解,动态代理原理分析,AndroidHook技术详解以及其在插件化,性能优化上的一些案例分析。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号