html实现图片裁剪,JavaScript html js图片切割系统,裁剪,图片处理
图片切割(裁剪),这里需要声明一下:
首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理(上传文件不在本次讨论范围,请自行修改);
还有是通过客户端传递的参数来处理图片,确实能得到展示图或预览图的效果(这是针对有些提出在后台处理的图片得不到预览图的效果来说的),下面会举例说明如何生成展示图那样的图片。
【客户端部分】
客户端部分详细请参考图片切割效果(建议没有看过的先看那里的例子),这里说说要传递到后台的参数,建议用GetPos获取部分参数:
Js代码
varp = ic.Url, o = ic.GetPos();
x = o.Left,
y = o.Top,
w = o.Width,
h = o.Height,
pw = ic._layBase.width,
ph = ic._layBase.height;
var p = ic.Url, o = ic.GetPos();
x = o.Left,
y = o.Top,
w = o.Width,
h = 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是图片高度。
可以这样传递这些参数:
Js代码
$("imgCreat").src ="ImgCropper.ashx?p="+ p +"&x="+ x +"&y="+ y +"&w="+ w +"&h="+ h +"&pw="+ pw +"&ph="+ ph +"&"+ Math.random();
$("imgCreat").src = "ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();
其中图片地址、图片宽度、图片高度如果是预先设定好的话就可以不传递了。
【后台部分】
后台主要是进行图片的处理和输出。
【图片切割】
在后台获取前台传递的参数:
C#代码
stringPic = Convert.ToString(context.Request["p"]);
intPointX = Convert.ToInt32(context.Request["x"]);
intPointY = Convert.ToInt32(context.Request["y"]);
intCutWidth = Convert.ToInt32(context.Request["w"]);
intCutHeight = Convert.ToInt32(context.Request["h"]);
intPicWidth = Convert.ToInt32(context.Request["pw"]);
intPicHeight = Convert.ToInt32(context.Request["ph"]);
string Pic = Convert.ToString(context.Request["p"]);
int PointX = Convert.ToInt32(context.Request["x"]);
int PointY = Convert.ToInt32(context.Request["y"]);
int CutWidth = Convert.ToInt32(context.Request["w"]);
int CutHeight = Convert.ToInt32(context.Request["h"]);
int PicWidth = Convert.ToInt32(context.Request["pw"]);
int PicHeight = Convert.ToInt32(context.Request["ph"]);
然后就用这些参数对图片进行切割了,先说说切割的原理,主要分两部:切割和缩放。
切割和缩放的程序关键在这里:
C#代码
gbmPhoto.DrawImage(imgPhoto,newRectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);
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就可以得到跟展示图一样的图片了:
C#代码
newRectangle(0, 0, CutWidth, CutHeight),
new Rectangle(0, 0, CutWidth, CutHeight),
下面是处理图片的程序:
C#代码
publicMemoryStream ResetImg(stringImgFile,intPicWidth,intPicHeight,intPointX,intPointY,intCutWidth,intCutHeight)
{
Image imgPhoto = Image.FromFile(ImgFile);
Bitmap bmPhoto =newBitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
gbmPhoto.DrawImage(imgPhoto,newRectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);
MemoryStream ms2 =newMemoryStream();
bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);
imgPhoto.Dispose();
gbmPhoto.Dispose();
bmPhoto.Dispose();
returnms2;
}
public MemoryStream ResetImg(string ImgFile, int PicWidth, int PicHeight, int PointX, int PointY, int CutWidth, int CutHeight)
{
Image imgPhoto = Image.FromFile(ImgFile);
Bitmap bmPhoto = new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
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);
MemoryStream ms2 = new MemoryStream();
bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);
imgPhoto.Dispose();
gbmPhoto.Dispose();
bmPhoto.Dispose();
return ms2;
}
当然对于不同的需求可能要生成的效果也不一样,但只要能灵活运用对于一般的需求基本都能实现了。
如果需要保存图片到服务器,那么可以用下面的方法保存图片:
C#代码
bmPhoto.Save(文件物理路径, System.Drawing.Imaging.ImageFormat.Jpeg);
bmPhoto.Save(文件物理路径, System.Drawing.Imaging.ImageFormat.Jpeg);
【IHttpHandler】
程序通过ashx文件用IHttpHandler发送切割生成的图片,参考使用.ashx文件处理IHttpHandler实现发送文本及二进制数据的方法:
“利用.ashx文件是一个更好的方法,这个文件类似于.aspx文件,可以通过它来调用HttpHandler类,从而免去了普通.aspx页面的控件解析以及页面处理的过程。这个文件特别适合于生成动态图片,生成动态文本等内容。”
最后设置数据输出类型context.Response.ContentType,并使用context.Response.OutputStream向客户端输出图片数据:
C#代码
context.Response.ContentType ="image/jpeg";
ResetImg(System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(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接口。
下面是完整服务器端代码:
C#代码
usingSystem;
usingSystem.Web;
usingSystem.Drawing;
usingSystem.IO;
publicclassImgCropper_WebHandler : IHttpHandler
{
publicvoidProcessRequest(HttpContext context)
{
stringPic = Convert.ToString(context.Request["p"]);
intPointX = Convert.ToInt32(context.Request["x"]);
intPointY = Convert.ToInt32(context.Request["y"]);
intCutWidth = Convert.ToInt32(context.Request["w"]);
intCutHeight = Convert.ToInt32(context.Request["h"]);
intPicWidth = Convert.ToInt32(context.Request["pw"]);
intPicHeight = Convert.ToInt32(context.Request["ph"]);
context.Response.ContentType ="image/jpeg";
ResetImg(System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(context.Response.OutputStream);
}
publicMemoryStream ResetImg(stringImgFile,intPicWidth,intPicHeight,intPointX,intPointY,intCutWidth,intCutHeight)
{
Image imgPhoto = Image.FromFile(ImgFile);
Bitmap bmPhoto =newBitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
gbmPhoto.DrawImage(imgPhoto,newRectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);
MemoryStream ms2 =newMemoryStream();
bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);
imgPhoto.Dispose();
gbmPhoto.Dispose();
bmPhoto.Dispose();
returnms2;
}
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
using System;
using System.Web;
using System.Drawing;
using System.IO;
public class ImgCropper_WebHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string Pic = Convert.ToString(context.Request["p"]);
int PointX = Convert.ToInt32(context.Request["x"]);
int PointY = Convert.ToInt32(context.Request["y"]);
int CutWidth = Convert.ToInt32(context.Request["w"]);
int CutHeight = Convert.ToInt32(context.Request["h"]);
int PicWidth = Convert.ToInt32(context.Request["pw"]);
int PicHeight = Convert.ToInt32(context.Request["ph"]);
context.Response.ContentType = "image/jpeg";
ResetImg(System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(context.Response.OutputStream);
}
public MemoryStream ResetImg(string ImgFile, int PicWidth, int PicHeight, int PointX, int PointY, int CutWidth, int CutHeight)
{
Image imgPhoto = Image.FromFile(ImgFile);
Bitmap bmPhoto = new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
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);
MemoryStream ms2 = new MemoryStream();
bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);
imgPhoto.Dispose();
gbmPhoto.Dispose();
bmPhoto.Dispose();
return ms2;
}
public bool IsReusable
{
get
{
return false;
}
}
}
由于涉及后台操作,请下载完整实例测试。 ps:实例中没有加入图片,测试时请自己插入一张图片(默认是1.jpg)。 ps2:应要求把asp版本加上了,但需要支持aspjpeg组件。
html实现图片裁剪,JavaScript html js图片切割系统,裁剪,图片处理相关推荐
- html绑定按键图片移动,如何使用JS实现用键盘控制图片移动呢?
html xmlns=http://www.w3.org/1999/xhtml headtitle标题页-学无忧(www.xue51.com)/title/headscript language=Ja ...
- linux下大文件裁剪,Linux系统裁剪(2)之Linux系统裁剪
1.这里使用交叉编译的思想,我在Redhat6.4上添加一个硬盘,将该硬盘分区以及安装好MBR之后,再将其挂载到另一个新建的虚拟机上,注意该虚拟机在创建时我只使用了这一个处理好的硬盘. 2.怎么添加新 ...
- html设置图片切割,JavaScript html js图片切割系统
JavaScript html js图片切割系统,裁剪,图片处理 关键字: javascript html js 图片切割系统裁剪处理 图片切割(裁剪),这里需要声明一下: 首先js是不能操作客户端文 ...
- win7查找计算机图片,win7系统查看图片分辨率的详细办法
win7系统使用久了,好多网友反馈说win7系统查看图片分辨率的问题,非常不方便.有什么办法可以永久解决win7系统查看图片分辨率的问题,面对win7系统查看图片分辨率的图文步骤非常简单,只需要1.在 ...
- input file图片上传(使用OSS Javscrtipt 上传到服务器)以及图片裁剪(cropper.js)
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
- 用javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
- javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
- html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
- JavaScript 逼真图片倒计时实现代码 js时间图片倒计时
JavaScript 逼真图片倒计时实现代码 js时间图片倒计时 效果图: <!doctype html> <html> <head> <meta cha ...
- JavaScript练习--[使用js语言实现网页切换图片的效果]
图片切换效果需求; (1)在网页中设计图片的切换效果;打开网页时,只能看到图片; (2)当鼠标移到图片上时,两个按钮就会显示出来; (3)当鼠标点击上;就会切换到上一张图片;点击下;就会切换到下一张图 ...
最新文章
- Expo大作战(三十)--expo sdk api之Permissions(权限管理模块),Pedometer(计步器api)
- SSMS2008插件开发(3)--部署调试SSMS2008插件
- IDEA直接跳转到方法的实现类快捷键
- UE4学习-场景介绍、基本操作、快捷键
- 项目管理基础:软件生命周期概念介绍
- linux sed写文件内容,Linux学习——文本处理:sed
- Matlab编程与C编程的不同
- 财务有必要学python吗-财务人要学Python吗?
- oxite “传入的路由无效”解决方案
- CF914D Bash and a Tough Math Puzzle 线段树
- [Excel] 数据透视表
- 天马行空的刷脸支付方式将是未来
- Linux磁盘16进制编辑,Tweak
- antd a-input-number 的基本使用
- SQL SERVER 2008 R2的累计补丁下载地址
- 深耕模具细分领域20载 德惠创新研发领跑行业
- 一篇好文,以在迷茫时阅读(文章转载自CSDN)
- 使用cmake调试“Could NOT find Boost (missing: iostreams program_options system“
- 怎么运行python外星人入侵_python编程:从入门到实践 外星人入侵项目:武装飞船 代码运行不显示飞船...
- JpaRepository 查询规范
热门文章
- 阿克曼运动模型(ackermann)的一些资料-室外光电组参考资料
- 微信小程序云开发教程-手把手:小程序数据库设计
- typedef void far *LPVOID 的具体定义
- 如何解决微软自带输入法突然变成繁体
- 欧姆龙r88d系列服务器说明书,欧姆龙R88D-KN10H-ECT-Z用户手册 - 广州凌控
- 幼儿园数学目标_大班数学领域目标
- 召回率(R值),准确率(P值)以及F值
- 华附计算机第一学神,全省第一,华附学子13人入选2019全国高中数学联赛冬令营!...
- python3 获取电脑上某个点的颜色RGB值
- Linux 根分区扩容