cloudgamer

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

程序说明

【客户端部分】

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

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

可以这样传递这些参数：

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

【后台部分】

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

【图片切割】

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

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"]);

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

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

首先是在原图切割出需要的部分。切割需要的参数是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就可以得到跟展示图一样的图片了：

下面是处理图片的程序：

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;
    }

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

【IHttpHandler】

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

最后设置数据输出类型context.Response.ContentType，并使用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组件。

近来要做一个记事本系统，想找一个合适的日历控件，但网上的都是那种日历选择控件。
于是到qq的记事本系统找了一个，但里面的算法有点落后，所以用了它的样式自己写了个。

效果：

程序说明

【Date】

这个日历控件运用了很多Date相关操作和方法。

先说说Date对象几个有用的属性：
getFullYear：返回年份值
getMonth：返回月份值
getDate：返回一个月中的日期值
getDay：返回一周中的日期值

其中对getDay可能比较陌生，下面列出值对应的星期：
值 星期
0 星期天
1 星期一
2 星期二
3 星期三
4 星期四
5 星期五
6 星期六

这几个属性都是根据本地时间获取的，还有getUTCFullYear、getUTCMonth、getUTCDate、getUTCDay这几个属性是全球标准时间对应的值。

下面说说获取日期对象，获取当前日期很简单：

获取指定日期：

获取指定年月日的日期：

下面是几个比较有技巧的地方：

首先，做日历控件时需要知道该月第一天离星期天的天数，参照getDay对应值，发现这刚好等于该月第一天的getDay值，所以可以这样获得：

还有是获取该月的天数，这里比较精妙，通过获取该月最后一天的getDate值就可以得到该月的天数，但没有办法直接获取该月最后一天。
这里有一个方法，当获取指定年月日的日期时，设置日参数为0，就可以获取上一个月的最后一天，所以可以这样获取：

这个方法是很久以前在别人代码中发现的。

使用说明：

首先是实例化一个Calendar，并设置参数。
参数说明：
Year:要显示的年份
Month:要显示的月份
SelectDay:选择日期
onSelectDay:在选择日期触发
onToday:在当天日期触发
onFinish:日历画完后触发

一般SelectDay设置成选择了的日期，并在onSelectDay中设置一个函数用来设置这个日期的样式，
例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect：

而onToday就用来设置今日日期的样式，
例如实例里面把今天的日期的样式设为onToday：

在onFinish中可以放需要设置日历的程序。
可以通过this.Year和this.Month获取当前日历显示的年份和月份。
对有数据的日期的也在这里设置，例如实例中是有一个当前月份的有数据的日期列表，然后根据这个列表对相应的日期进行设置：

Code
var flag = [10,15,20];
for(var i = 0, len = flag.length; i < len; i++){
    this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
}

实例中是固定了这个日期列表，实际应用中可以根据年份月份获取对应的日期列表，
个人推荐用年份月份通过ajax获取。

程序还有下面这几个方法：
NowMonth：显示当前月
PreMonth：显示上一月
NextMonth：显示下一月
PreYear：显示上一年
NextYear：显示下一年
PreDraw：根据日期参数画日历

程序代码：

Code
var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

var Extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}


var Calendar = Class.create();
Calendar.prototype = {
  initialize: function(container, options) {
    this.Container = $(container);//容器(table结构)
    this.Days = [];//日期对象列表
    
    this.SetOptions(options);
    
    this.Year = this.options.Year || new Date().getFullYear();
    this.Month = this.options.Month || new Date().getMonth() + 1;
    this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null;
    this.onSelectDay = this.options.onSelectDay;
    this.onToday = this.options.onToday;
    this.onFinish = this.options.onFinish;    
    
    this.Draw();
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
        Year:            0,//显示年
        Month:            0,//显示月
        SelectDay:        null,//选择日期
        onSelectDay:    function(){},//在选择日期触发
        onToday:        function(){},//在当天日期触发
        onFinish:        function(){}//日历画完后触发
    };
    Extend(this.options, options || {});
  },
  //当前月
  NowMonth: function() {
    this.PreDraw(new Date());
  },
  //上一月
  PreMonth: function() {
    this.PreDraw(new Date(this.Year, this.Month - 2, 1));
  },
  //下一月
  NextMonth: function() {
    this.PreDraw(new Date(this.Year, this.Month, 1));
  },
  //上一年
  PreYear: function() {
    this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1));
  },
  //下一年
  NextYear: function() {
    this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1));
  },
  //根据日期画日历
  PreDraw: function(date) {
    //再设置属性
    this.Year = date.getFullYear(); this.Month = date.getMonth() + 1;
    //重新画日历
    this.Draw();
  },
  //画日历
  Draw: function() {
    //用来保存日期列表
    var arr = [];
    //用当月第一天在一周中的日期值作为当月离第一天的天数
    for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); }
    //用当月最后一天在一个月中的日期值作为当月的天数
    for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
    //清空原来的日期对象列表
    this.Days = [];
    //插入日期
    var frag = document.createDocumentFragment();
    while(arr.length){
        //每个星期插入一个tr
        var row = document.createElement("tr");
        //每个星期有7天
        for(var i = 1; i <= 7; i++){
            var cell = document.createElement("td"); cell.innerHTML = "&nbsp;";
            if(arr.length){
                var d = arr.shift();
                if(d){
                    cell.innerHTML = d;
                    this.Days[d] = cell;
                    var on = new Date(this.Year, this.Month - 1, d);
                    //判断是否今日
                    this.IsSame(on, new Date()) && this.onToday(cell);
                    //判断是否选择日期
                    this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell);
                }
            }
            row.appendChild(cell);
        }
        frag.appendChild(row);
    }
    //先清空内容再插入(ie的table不能用innerHTML)
    while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
    this.Container.appendChild(frag);
    //附加程序
    this.onFinish();
  },
  //判断是否同一日
  IsSame: function(d1, d2) {
    return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
  } 
}

测试代码：

Code
var cale = new Calendar("idCalendar", {
    SelectDay: new Date().setDate(10),
    onSelectDay: function(o){ o.className = "onSelect"; },
    onToday: function(o){ o.className = "onToday"; },
    onFinish: function(){
        $("idCalendarYear").innerHTML = this.Year; $("idCalendarMonth").innerHTML = this.Month;
        var flag = [10,15,20];
        for(var i = 0, len = flag.length; i < len; i++){
            this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";
        }
    }
});

$("idCalendarPre").onclick = function(){ cale.PreMonth(); }
$("idCalendarNext").onclick = function(){ cale.NextMonth(); }

$("idCalendarPreYear").onclick = function(){ cale.PreYear(); }
$("idCalendarNextYear").onclick = function(){ cale.NextYear(); }

$("idCalendarNow").onclick = function(){ cale.NowMonth(); }

完整实例下载

由于asp的cookie是经过url编码的，所以读之前要unescape一下。

下面是我用正则的方法取cookie，包括单值和多值：

有不完善的话，欢迎指出。

ie7的li:hover问题

 ie6和ff都很正常

但ie7就有问题，当把光标放在文本框中，然后再把鼠标放在菜单上，弹出来的菜单就不会消失了

解决方法是去掉#list:hover或者加一个样式在onmouseout中设置

但未知什么原因

ie6的line-height失效问题

ie7和ff显示正常
但ie6的line-height就没效果

未知解决方法，未知原因

ie高度设置问题

这是一个全屏的三层样式

ff的效果应该是正确的
但在ie里上下两块的高度都不是设定的100px

未知原因，未有解决方法

 js的正则问题

用ie的话是0 true 0 true
用ff的话是0 true 1 false

原因没有弄清楚

不过直接用new RegExp的方法能解决

ie透明背景问题

Code
<div style="border:1px solid #000; height:100px; width:100px; position:absolute;" onclick="alert(1)">
click
</div>

ff中正常，在ie中点击div中文字以外的部分会没反应。

如果有background-color就没问题，未知原因。

document.body.appendChild()导致IE已终止操作

以下代码会导致在ie出错“已终止操作”，ff中是没问题的：

Code
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div>
<script type="text/javascript">
document.body.appendChild(document.createElement("div"));
</script>
</div>
</body>
</html>

但脚本如果不套在div里面又没问题，

未知原因，估计跟dom有关（网上说是跟body的加载顺序有关）。

解决方法是body加载完之后执行(ie特有的document.body.onload)，或用insertBefore代替，例如：

ie的table的td的宽度问题

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="1" width="600">
    <tr>
      <td width="100" align="right"> 后面空了： </td>
      <td> 内容内容内容内容内容内容内容 </td>
    </tr>
    <tr>
      <td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 温馨提示 </td>
    </tr>
</table>
<br /><br />
<table border="1" cellspacing="1" cellpadding="1" width="600">
    <tr>
      <td width="100" align="right"> 后面空了： </td>
      <td> 内容内容 </td>
    </tr>
    <tr>
      <td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 温馨提示 </td>
    </tr>
</table>
<br /><br />
<table border="1" cellspacing="1" cellpadding="1" width="600">
    <tr>
      <td width="100" align="right"> 正常正常：</td>
      <td> 内容内容内容内容内容内容内容 </td>
    </tr>
        <tr>
      <td colspan="2"> 温馨提示：温馨提示 温馨提示 温馨提示 </td>
    </tr>
</table>
</body>
</html>

以上3个table的结构是一样的其中都有一个td是100宽度只是内容不同，
在ff中3个table显示的效果是一样的，但用ie看会发现第一第二个table会无端多出一段空白

解决方法：给table添加样式table-layout:fixed;，未定义时，单元格宽度会按内容宽度的比例自动调整。

ie6/7的hr行距问题

即使给hr设置了margin和padding都是0，但ie6和ie7还有有一个间距。
未知原因，未找到解决方法，建议用div的border模拟。

 
IE8的链接触发问题

用ie8鼠标在“测试2”后面移动，居然会触发“测试1”的hover。
未知原因，未有解决方法。