上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下:
首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理(上传文件不在本次讨论范围,请自行修改);
还有是通过客户端传递的参数来处理图片,确实能得到展示图或预览图的效果(这是针对有些提出在后台处理的图片得不到预览图的效果来说的),下面会举例说明如何生成展示图那样的图片。
程序说明
【客户端部分】
客户端部分详细请参考图片切割效果(建议没有看过的先看那里的例子),这里说说要传递到后台的参数,建议用GetPos获取部分参数:
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是图片高度。
可以这样传递这些参数:
$("imgCreat").src = "ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();
其中图片地址、图片宽度、图片高度如果是预先设定好的话就可以不传递了。
【后台部分】
后台主要是进行图片的处理和输出。
【图片切割】
在后台获取前台传递的参数:

Code
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"]);
然后就用这些参数对图片进行切割了,先说说切割的原理,主要分两部:切割和缩放。
切割和缩放的程序关键在这里:
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
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;
}
当然对于不同的需求可能要生成的效果也不一样,但只要能灵活运用对于一般的需求基本都能实现了。
如果需要保存图片到服务器,那么可以用下面的方法保存图片:
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
<%@ WebHandler Language="c#" Class="ImgCropper_WebHandler" Debug="true" %>
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;
}
}
}
各位有什么建议或意见欢迎留言讨论,由于涉及后台操作,请下载完整实例测试。
下载完整测试实例(.net版本)
下载完整测试实例(asp版本)
ps:实例中没有加入图片,测试时请自己插入一张图片(默认是1.jpg)。
ps2:应要求把asp版本加上了,但需要支持aspjpeg组件。
posted @ 2008-10-05 00:20
cloudgamer 阅读(14720)
评论(103) 编辑 收藏 网摘 所属分类:
Asp.netJavascript
发表评论
#102楼[
楼主]2008-10-05 11:57 |
@侯垒
谢谢支持,有什么问题欢迎提出
@Martin(高超)
应该不会有毒吧 !-_-
楼主,今天发布的完整实例有没有自己做demo测试过!
有的话,可不可以将demo发我一份谢谢!
#106楼[
楼主]2008-10-05 17:19 |
@长河落日
@<∩扫地僧∩>
谢谢支持
@view2008
那是个完整实例可以运行测试的
直接下载就行了
我下载了楼主的代码,将里面的全部文件复制到一个ASP.NET 项目中,测试运行,成功。
但是有一个问题是,点击“生成图片”按钮后,在下面生成的图片,必须手动另存为一个图片文件。
这种图片切割一般用于用户头像照片的上传中,请问如何在点击“生成图片”按钮后,让其自动保存生成的图片到本机,然后进行上传?
#108楼[
楼主]2008-10-05 20:10 |
@mike108mvp
“让其自动保存生成的图片到本机,然后进行上传”
图片是在后台生成的
保存图片的话可以在后台生成图片后保存到服务器
进行上传?没看明白
#110楼[
楼主]2008-10-05 21:55 |
@omeweb
这个效果是很久以前就有了
欢迎交流
@cloudgamer
其实我要问的就是如何在ImgCropper.ashx 后台保存生成的图片到一个目录中?
#112楼[
楼主]2008-10-05 22:48 |
@mike108mvp
把生成的图片数据保存成图片就行了
例如
bmPhoto.Save(路径, System.Drawing.Imaging.ImageFormat.Jpeg);
@cloudgamer
请问:
bmPhoto.Save(路径, System.Drawing.Imaging.ImageFormat.Jpeg);
是写在ImgCropper.ashx 里面吗?我测试了一下,不行啊。无法保存生成的图片。
#116楼[
楼主]2008-10-06 10:59 |
@王国金
@汪洋怡舟
谢谢支持
@mike108mvp
我举个例子吧
bmPhoto.Save(System.Web.HttpContext.Current.Server.MapPath("5.jpg"), System.Drawing.Imaging.ImageFormat.Jpeg);
我这里确实行
@cloudgamer
谢谢。现在可以了。
ImgCropper.ashx 的public MemoryStream ResetImg()中:
//保存图片文件
string filePathAndName = HttpContext.Current.Server.MapPath("~/Image/") + "01.jpg";
bmPhoto.Save(filePathAndName, System.Drawing.Imaging.ImageFormat.Jpeg);
请问能否加一个功能:
在切割时,能否将切割的部分图片进行放大/缩小。 这样就可以完美实现用户头像照片的切割上传功能了。
#119楼[
楼主]2008-10-06 13:50 |
@mike108mvp
对图片的操作你可以看看相关资料
跟程序关系不大
再来支持你一下。改天试试看。
PS:我还没空把你的这个加到我的相册中
@cloudgamer
var ic = new ImgCropper("bgDiv", "dragDiv", "/photo/e72ee12f-800f-476a-947d-a0913af4bac7.jpg", 400,400,
这个就可以
我想用本地的图片,这样可以效率高一些,呵呵,有没有更好的解决方案
还有个问题就是,能不能让图片自适应大小那,就是等比例大小,固定的大小有时候图片失真了
#122楼[
楼主]2008-10-07 09:58 |
@jantouy
"首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于客户端的图片可以先上传再切割;"
我在前面已经说明了
@数据绑定者
欢迎交流
#123楼[
楼主]2008-10-07 13:54 |
@jantouy
其实你问的问题都是处理图片的问题
或者你找写些关于gdi的文章看看吧
这里就不讨论了
呵呵,朋友,你写的这个切割图片不错,我的实现也是基于后台代码实现,js只是前端传递参数而已。
比我的那个例子好看,文笔也好,你的博客也专门支持代码段,看着比较清爽。
有机会多多交流。
您好,控件不错!切割好的图片不是.jpg格式,代码中是 bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);是保存为.jpg,可结果.bmp 格式,忘大侠测试一下,呵呵
#126楼[
楼主]2008-10-14 08:43 |
@zjy
谢谢
多多交流
@runerboy
确实是jpg的
我想只是我没有设文件名所以系统默认了bmp
你好,楼主今天看了你做的图片切割系统,改为php后台,发现ie识别为bmp图片,其他浏览器可以正常识别,请问什么解决办法啊!
#128楼[
楼主]2008-10-26 17:25 |
@举荐
可能是你没有设置文件名
你可以设置后缀为jpg文件名试试
ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random
这个我用ashx实现也是bmp啊在文件头部加入header("Content-type:image/jpeg"); ,ie还是不能识别请提出解决方案,恰好这个博客空间采用的验证码是jpg,ie可以识别为jpg,谢谢啊!
找到解决方案了,你的Math.random这个函数少了括号改为这个Math.random()就显示正常了、
#131楼[
楼主]2008-10-27 11:15 |
@举荐
哦
不好意思
谢谢指出
有时候,我们的图片很大,这个时候需要缩放才可以,也展示区域的缩放和切图的缩放以及原始比例等。目前在你的这个例子中似乎还没有体现的。
#133楼[
楼主]2008-11-07 11:45 |
@Yoker.Wu
缩放前台后台都可以通过程序缩放
不明白你说的是怎么样的
我想通过修改参数就能得到你想要的效果
在前台,我在Init中第二行增加了下面的代码:
-----------------------------------------------------------------
var trueImg = new Image();
trueImg.src=this.Url;
if(trueImg.width>this.Width || trueImg.height>this.Height){
if(this.Width/this.Height>trueImg.width/trueImg.height){
this.Width = parseInt(trueImg.width * this.Height/trueImg.height);
}else{
this.Height = parseInt(trueImg.height * this.Width/trueImg.width);
}
}else{
this.Width = trueImg.width;
this.Height = trueImg.height;
}
-----------------------------------------------------------------
在后台代码中,我修改了ResetImg中相关代码:
-----------------------------------------------------------------
//切图实际图片的大小
int Width = CutWidth * imgPhoto.Width / PicWidth;
int Height = CutHeight * imgPhoto.Height / PicHeight;
//所选区域在真实图片中的大小切出来的图
Bitmap bmPhoto = new Bitmap(Width, Height, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gbmPhoto = Graphics.FromImage(bmPhoto);
gbmPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, Width, Height), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, Width, Height, GraphicsUnit.Pixel);
bmPhoto.Save(HttpContext.Current.Server.MapPath("big.jpeg"), System.Drawing.Imaging.ImageFormat.Jpeg);
//所选区域在前台比例缩放后切出来的图
Bitmap ThumbnailPhoto = new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics gThumbnailPhoto = Graphics.FromImage(ThumbnailPhoto);
gThumbnailPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, Width, Height, GraphicsUnit.Pixel);
ThumbnailPhoto.Save(HttpContext.Current.Server.MapPath("small.jpeg"), System.Drawing.Imaging.ImageFormat.Jpeg);
-----------------------------------------------------------------
你的代码很漂亮。
才发现把 initialize 方法里面的 this.Init() 替换为下面的代码更好:
---------------------------------------------------------------------
//前台缩放效果改善,图片加载完成后,得到缩放大小再初始化显示
var trueImg = new Image();
trueImg.src = url;
trueImg.onload = function(){
if(this.width>oThis.Width || this.height>oThis.Height){
if(oThis.Width/oThis.Height>this.width/this.height){
oThis.Width = parseInt(this.width * oThis.Height/this.height);
}else{
oThis.Height = parseInt(this.height * oThis.Width/this.width);
}
}else{
oThis.Width = this.width;
oThis.Height = this.height;
}
oThis.Init();
}
#136楼[
楼主]2008-11-07 20:13 |
@Yoker.Wu
呵呵
共同学习
$("imgCreat").src = "ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();
测试已经通过,非常感谢,但是写入数据库时,有的参数不能传递
ImgCropper.ashx?p=image/345.jpg&x=0&y=0&w=0&h=0&pw=466&ph=626&0.3811137677607208
x,y,w,h都为0 不知怎么解决,还请赐教
不胜感激
#139楼[
楼主]2008-11-12 19:31 |
@52evan
asp应该也可以
编辑图片的原理是一样的
@zyfei
没看明白?写入数据库?
我发到你的这个邮箱里了 email:cloudgamer[at]163.com
我是想把他放在数据库的一个字段,要用的时候把他调出来,但没有实现,
我是这样操作:rs("pic")="<script>document.write($('imgCreat').src);</script>"
输出的结果是 ImgCropper.ashx?p=image/345.jpg&x=0&y=0&w=0&h=0&pw=466&ph=626
请高手指点
不明白:保存图片的话可以在后台生成图片后保存到服务器
进行上传? 大侠能否具体解析一下
#143楼[
楼主]2008-11-14 08:36 |
@zyfei
你怎么把"<script>document.write($('imgCreat').src);</script>
这个东西写入数据库呢
你要把"ImgCropper.ashx?p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&pw=" + pw + "&ph=" + ph + "&" + Math.random();
这个值写入数据库才对啊,而且你好像前后台都没弄清楚哦
@qingren
生成数据部分
MemoryStream ms2 = new MemoryStream();
bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);
这里我是把数据保存到数据流中
如果保存图片文件到服务器可以
bmPhoto.Save(文件物理路径, System.Drawing.Imaging.ImageFormat.Jpeg);
这样保存
大侠,我用了你的找个很好用,可是现在我想在页面加载的时候,自动要加载的图片,也就是在
var ic = new ImgCropper("bgDiv", "dragDiv","1,jpg", 300, 400, {。。。})
把1.jpg 换成一个可变的URL,怎么做。我用<%=Path%>这个,写隐藏域用js得到都不行,有没有例子给我看下啊。指点指点吧。我的QQ:93344748
#145楼[
楼主]2008-11-18 11:52 |
@寿
那个直接用图片地址应该可以的啊
你是怎么写的
我在后台定义了一个Public属性,
然后在var ic = new ImgCropper("bgDiv", "dragDiv",<%=Path%>, 300, 400, {
得不到
你是怎么做的,谢谢,回复这么快
我在你的这个函数里加了根据图片的大小控制显示宽高,这样就不会把图片拉升了。原来的程序里是固定了高度。
//图片切割
var ImgCropper = Class.create();
ImgCropper.prototype = {
//容器对象,拖放缩放对象,图片地址,宽度,高度
initialize: function(container, drag, url, width, height, options) {
// alert(document.getElementById("HidSavedPath").value
//得到图片的原始图片
var image=new Image();
image.src = url;
width = image.width ;
height = image.height;
var iwidth = 300;//定义允许图片宽度
var iheight = 300;//定义允许图片高度.
var ImgWidth = 0,ImgHeight = 0; //图片零时变量
//根据图片比例,修改图片的宽高。
if(image.width>0 && image.height>0)
{
alert(" zhixingle ");
if(image.width/image.height>=iwidth/iheight)
{
if(image.width>iwidth)
{
ImgWidth=iwidth;
ImgHeight=(image.height*iwidth)/image.width;
}
else
{
ImgWidth=image.width;
ImgHeight=image.height;
}
}
else
{
if(image.height>iheight)
{
ImgHeight=iheight;
ImgWidth=(image.width*iheight)/image.height;
}
else
{
ImgWidth=image.width;
ImgHeight=image.height;
}
}
}
/*设置图片的大小,成比例变化结束*/
width = ImgWidth ;
height = ImgHeight;
#149楼[
楼主]2008-11-18 13:57 |
@寿
var ic = new ImgCropper("bgDiv", "dragDiv","<%=Path%>", 300, 400, {
你要加上引号啊
惭愧,惭愧,等我做好了给你发个我做的例子。让你看看
#151楼[
楼主]2008-11-18 19:18 |
@寿
好的
谢谢支持
#154楼[
楼主]2008-11-19 19:19 |
@寿
找到记得告诉我哦
@YokerWu
不错哦
能说说那些地方改进过吗
学习学习
#156楼[
楼主]2008-11-20 17:11 |
@YokerWu
哦
不错不错
多多交流
请问:搂主
一个报纸排版功能 的图片切割,应该怎么做呢?
#159楼[
楼主]2008-12-08 19:18 |
@1111111111111111111111111111111
谢谢支持
@cctv
没看明白
能不能把遮罩的图改成椭圆形的呢?想截取一个椭圆形的图片该怎么改呢?
#163楼[
楼主]2008-12-25 15:05 |
@LWC
@Leafer
谢谢支持
@ldw_701
这个太难
我是无能为力了
想问一下 改哪个参数 可以让生成的图片是固定大小的 意思是说 就是和预览是一个效果的图片 谢谢楼主 mylovegongda@sina.com
楼主好 还有个问题就是没找到 默认的截图比例和大小
#166楼[
楼主]2008-12-28 22:36 |
楼主好啊··· 我现在正在学习这个·可以加我QQ877151005 吗
我想询问你一些东西····· 有些地方不明白
我想获取需要截取的图片ID在哪可以写进去?
楼主·提前祝你新年快乐啊···
你有java版本的图片切割系统吗·?
#169楼[
楼主]2009-01-14 14:35 |
@遗忘
什么图片id?直接用图片url就行啦
java我不懂不过后台都很简单动动手吧
楼主你太牛了··o(∩_∩)o...
可以加你QQ吗··
#172楼[
楼主]2009-01-14 14:42 |
@遗忘
ic.Url就是图片地址,在前台显示
#173楼[
楼主]2009-01-14 14:46 |
@遗忘
公共那里就有
只是我很少上
email也行
请问楼主:
你写的asp只是把图片显示出来了,并没有把切割的图片生成图片,请问应该怎么做?
#176楼[
楼主]2009-02-23 08:26 |
@遗忘
@asp问题
谢谢支持
你有按生成图片那个按钮吗
按了之后才会生成图片(不是预览那个)
然后你另存为图片试试
要保存图片可以自己写
谢谢,我已经搞成功了。不过就是不知道怎么用按钮控制图片放大缩小,有这样的代码吗,麻烦贴出来看看,我想实现像MSN里面窃照片那样的功能。
#178楼[
楼主]2009-02-23 15:48 |
#183楼[
楼主]2009-04-11 08:23 |
@绘图板凳
@VisualStudio
@不顶你对不起xxx
谢谢支持
#184楼[
楼主]2009-04-11 08:23 |
@helili
请参考asp版本
#186楼[
楼主]2009-05-21 10:33 |
@3123
请下载实例测试
@cloudgamer
自己刚才调试过了,原来是先引入了3个js文件
才导致后面的class 没取道。
谢谢楼主发布这么好的文章。感谢了。
我点击生成图片之后,为什么图片没有显示出来啊 在ie里面打ashx的路径也不行。 请问什么原因啊
#189楼[
楼主]2009-05-21 16:23 |
@3123
你先下载实例看看行不行
行的话你就要自己检查咯
是我自己的配置问题。 ashx和ajaxpro 冲突了
正好做个上传照片,先谢了
再个问题,我是菜鸟,前面的都成功,我还加了上传图片,我想把大小固定,比如:220x314在哪里设一下,还有就是保存,我在asp不成功。楼主能否提点一下,非常感谢!
#193楼[
楼主]2009-06-03 08:26 |
@路由器
asp是可以的
都测试过
#195楼[
楼主]2009-06-17 13:50 |
@123123123123
点击生成按钮后就看见
楼主,生成的图片如何加的数据库里呢?
我在库里有个表,来存放生成的图片的路径,请问楼主,如何给数据库添加字段的值呢,也就是图片的路径,谢谢楼主!
有没有图片旋转的例子
#197楼[
楼主]2009-06-18 11:56 |
@xuexi net
图片旋转这个程序没有
不过你可以通过滤镜扩展这个功能
本程序只是做图片上传部分不包括数据库
要扩展的话请自己研究
为了能保证源图片的大小不变型缩放,在前台的var ic = new ImgCropper("bgDiv", "dragDiv", pic_path, {函数前加上如下代码:
var pic_path="<%=pic_path%>";
function re_img(){
var image=new Image();
image.src = pic_path;
y_width = image.width ;
y_height = image.height;
if (y_width/300>y_height/400){
s_width=300;
s_height=y_height/(y_width/300);
}else{
s_height=400;
s_width=y_width/(y_height/400);
}
}
re_img();
其中,var pic_path="<%=pic_path%>";这句是接受传递的图片地址信息
if (y_width/300>y_height/400){
s_width=300;
s_height=y_height/(y_width/300);
}else{
s_height=400;
s_width=y_width/(y_height/400);
}
这里定义了图片裁剪框的宽度和高度
#201楼[
楼主]
2009-06-19 11:11 |