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

图片切割系统_图片切片工具上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下:首先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)
blank

相关推荐

  • 查看webpack版本命令_webpack阮一峰

    查看webpack版本命令_webpack阮一峰想着搞一下webpack的构建优化,网上看到一些方法说是要webpack4及以上的才能用。然后就要看看是啥版本来着——查看当前项目的webpack版本1.命令行执行npxwebpack-v(最方便啦)因为webpack是局部安装,要进入依赖包执行webpack的命令才有效,直接webpack-v会被认为命令无效。使用npm包执行器npx可以自动找到对应的包执行命令(一般安装了npm会自动安装npx)2.在package.json添加script命

  • draggable的用法_draggable

    draggable的用法_draggable一、概述通过前面几节学习,大家应该都知道了,一个div对象是可以通过拖拉来改变大小,也可以通过拖动来改变其位置的。如何改变大小已经讲解过了,那么怎么实现拖动改变位置呢?现在就开始讲解如何实现拖动-

  • 信息系统项目管理师高级论文_信息系统项目管理师历年论文题目

    信息系统项目管理师高级论文_信息系统项目管理师历年论文题目本系列文章将会对信息系统项目管理师考试中出现的十大管理论文进行分析,并给出参考范文,帮助考生备考复习。更多复习内容请在微信搜索小程序“信息系统项目管理师高频考点”。2021上半年论文真题范围管理论文试题一论信息系统项目的范围管理项目范围管理必须清晰地定义项目范围,其主要工作是要确定哪些工作是项目应该做的,哪些不应该包括在项目中。请以“论信息系统项目的范围管理”为题进行论述∶1.概要叙述你参与管理过的一个信息系统项目(项目的背景、项目规模、发起单位、目的、项目内容、组织结构

  • UpdatePanel简单用法

    UpdatePanel简单用法ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果。其中的UpdatePanel就是设置页面中异步局部更新区域,它必须依赖于ScriptManager存在,因为ScriptManger控件提供了客户端脚本生成与管理UpdatePanel的功能。几个重要的属性:   ScriptManager控件的EnablePartialRendering属性:t

  • SCI 投稿Cover letter模板大全「建议收藏」

    SCI 投稿Cover letter模板大全「建议收藏」“`一、第一次投稿Coverletter:主要任务是介绍文章主要创新以及声明没有一稿多投DearEditors,Wewouldliketosubmittheenclosedmanuscriptentitled“PaperTi…

  • 【软件工具】服务器硬件资源监控

    【软件工具】服务器硬件资源监控服务器资源使用情况及硬件监控,是服务器管理员或运维人员必备的技能和工作内容。对于服务器硬件的时时监控,除了需要掌握定的方法外,还常会用到些相应的相关软件程序。当然,运维同仁般都具备定的编程能力,根据服务器情况,编写个便捷、好用和适合自己的服务器硬件监控软件也是很有必要的。     服务器硬件监控常用方法及相关软件:  raid卡监控:raid卡常有rai

发表回复

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

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