网站中集成jquery.imgareaselect兑现图片的本地预览和选择截取

网站中集成jquery.imgareaselect实现图片的本地预览和选择截取

imgAreaSelect?是由?Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能。其文档和Demo也是很详尽的。大家可以到http://odyniec.net/projects/imgareaselect/了解更多的细节。

下面我们就开始使用imgAreaSelect?开始code吧。

第一还是要引用jquery,接着引用下载好的?jquery.imgareaselect.pack.js 文件和?imgareaselect-default.css 样式文件。

接着写一些元素标签

<img id="ferret" src="" alt="网站中集成jquery.imgareaselect兑现图片的本地预览和选择截取" title="It's coming right for us!"        style="float: left; margin-right: 10px; width: 400px; height: 300px" />        <input type="hidden" name="x1" value="" />    <input type="hidden" name="y1" value="" />    <input type="hidden" name="x2" value="" />    <input type="hidden" name="y2" value="" />    <input id="loadFile" type="file" name="name" onchange="readURL(this);" />    <input type="submit" name="submit" value="Submit" />

接着开始写js

<script type="text/javascript">        //绘制小图        function preview(img, selection) {            var scaleX = 100 / (selection.width || 1);            var scaleY = 100 / (selection.height || 1);            $('#ferret + div > img').css({                width: Math.round(scaleX * 400) + 'px',                height: Math.round(scaleY * 300) + 'px',                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'            });        }        $(document).ready(function () {            //添加小图            $('<div><img id="ferret1"  src="" style="position: relative;" /><div>')        .css({            float: 'left',            position: 'relative',            overflow: 'hidden',            width: '100px',            height: '100px'        })        .insertAfter($('#ferret'));            //主图编辑            $('#ferret').imgAreaSelect({ x1: 120, y1: 90, x2: 280, y2: 210, aspectRatio: '4:3', onSelectChange: preview, onSelectEnd: function (img, selection) {                $('input[name="x1"]').val(selection.x1);                $('input[name="y1"]').val(selection.y1);                $('input[name="x2"]').val(selection.x2);                $('input[name="y2"]').val(selection.y2);            }            });        });        //本地预览        function readURL(input) {            var strSrc = $("#loadFile").val();            //验证上传文件格式是否正确              var pos = strSrc.lastIndexOf(".");            var lastname = strSrc.substring(pos, strSrc.length);            if (lastname.toLowerCase() != ".jpg") {                alert("您上传的文件类型为" + lastname + "，图片必须为 JPG 类型");                return false;            }            //验证上传文件是否超出了大小              if (input.files[0].size / 1024 > 150) {                alert("您上传的文件大小超出了150K限制！");                return false;            }            if (input.files && input.files[0]) {                var reader = new FileReader();                reader.onload = function (e) {                    $('#ferret').attr('src', e.target.result);                    $('#ferret1').attr('src', e.target.result);                };                reader.readAsDataURL(input.files[0]);            }        }    </script>

前端写完了，接下来开始写后端的代码了

protected void Page_Load(object sender, EventArgs e)        {            if (IsPostBack)            {                int x1 = Convert.ToInt32(Request["x1"]);                int y1 = Convert.ToInt32(Request["y1"]);                int x2 = Convert.ToInt32(Request["x2"]);                int y2 = Convert.ToInt32(Request["y2"]);                HttpFileCollection files = Request.Files;                for (int i = 0; i < files.Count; i++)                {                    HttpPostedFile file = files[i];                    file.SaveAs(Server.MapPath("Upload/" + file.FileName));                    //设置缩略图                    int Thumbnailwidth = 400;                    int Thumbnailheight = 300;                    //新建一个bmp图片                      Bitmap bitmap = new Bitmap(Thumbnailwidth, Thumbnailheight);                    //新建一个画板                      Graphics graphic = Graphics.FromImage(bitmap);                    //设置高质量插值法                      graphic.InterpolationMode = InterpolationMode.High;                    //设置高质量,低速度呈现平滑程度                      graphic.SmoothingMode = SmoothingMode.HighQuality;                    //清空画布并以透明背景色填充                      graphic.Clear(System.Drawing.Color.Transparent);                    //原图片                    Bitmap originalImage = new Bitmap(file.InputStream);                    //在指定位置并且按指定大小绘制原图片的指定部分                      graphic.DrawImage(originalImage, new System.Drawing.Rectangle(0, 0, Thumbnailwidth, Thumbnailheight),                        new System.Drawing.Rectangle(0, 0, originalImage.Width, originalImage.Height),                        System.Drawing.GraphicsUnit.Pixel);                    //得到缩略图                    System.Drawing.Image ThumbnailImage = System.Drawing.Image.FromHbitmap(bitmap.GetHbitmap());                    //创建选择图片                    Bitmap selectbitmap = new Bitmap(x2-x1, y2-y1);                    //新建一个画板                      Graphics selectgraphic = Graphics.FromImage(selectbitmap);                                       //裁切                    selectgraphic.DrawImage(ThumbnailImage, 0, 0, new Rectangle(x1, y1, x2 - x1, y2 - y1), GraphicsUnit.Pixel);                    //保存                    selectbitmap.Save(Server.MapPath("Upload/"+Guid.NewGuid() + file.FileName), ImageFormat.Jpeg);                   //todo:将上述资源释放                }            }        }

?这里我们先将图片缩小到与前台大图一样的比例，然后在进行截取，并保存到文件中。

转自http://www.cnblogs.com/WilliamWang/archive/2012/09/17/imgareaselect.html