[置顶] JQuery在线截取图片
生活随笔
收集整理的這篇文章主要介紹了
[置顶] JQuery在线截取图片
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
JQuery在線截取圖片 ASP.NET結(jié)構(gòu)開(kāi)發(fā)
1.在線截取
?前幾天看織夢(mèng)CMS,有個(gè)截圖功能挺好的,可以在線選取需要截取的部分圖片,然后后臺(tái)截取
2.開(kāi)始正文
首先構(gòu)建文檔,樣式
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>JQuery截取圖片</title><script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script><style type="text/css">body{width: 100%;height: 100%;background-color: #333;}#body1{margin-top: 50px;margin-left: 50px;right: 50px;background-color: #999;width: 800px;height: 500px;}#div_img{left:70px;top:60px;border:3px solid #333;width:400px;height:300px;position:absolute; z-index:1;}#div_caijian{ border:2px; border-style:dashed; border-color:#FFF; position:absolute; width:240px; height:180px; left:73px; top:63px; cursor:move; z-index:999;}#div_xinxi{ color:#333; top:450px; left:70px; position:absolute;}#div_liulan{ border:3px solid #333; width:150px; height:112.5px; left:500px; top:60px; position:absolute; overflow:hidden;}#img_liulan{ position:absolute; left:0px; top:0px;}</style><script type="text/javascript" language="javascript">//JS</script> </head> <body><form id="form1" runat="server"><div id="body1"><div id="div_img"><img src="Images/Chrysanthemum.jpg" width="400px" height="300px" alt="" /></div><div id="div_xinxi">left: <asp:TextBox ID="txt_left" runat="server" Text="0"></asp:TextBox> ??top: <asp:TextBox ID="txt_top" runat="server" Text="0"></asp:TextBox> ??<asp:Button ID="Button1" runat="server" Text="裁剪" οnclick="Button1_Click" /></div><div id="div_liulan"><img id="img_liulan" src="Images/Chrysanthemum.jpg" width="250px" height="187.5px" alt=""></div></div><div id="div_caijian"><!-- IE下空層選不中,邊框能選中,未解,有知道的請(qǐng)告訴LZ 謝謝~~ --></div></form> </body> </html>樣式和內(nèi)容在這里就不多介紹了 大家看看就可以了 出來(lái)的效果如下:
JavaScript的編寫(xiě)
var x, y;var old_position = {};var offset = {};$(document).ready(hide);function hide() {//選擇層半透明 效果酷一點(diǎn)$("#div_caijian").fadeTo("slow", 0.5);//選擇層移動(dòng)事件$("#div_caijian").mousedown(function (e) {//獲取當(dāng)前選擇層的相對(duì)坐標(biāo)(與PageX,PageY不同clientX,clientY是相對(duì)坐標(biāo) 如果有滾動(dòng)條值也會(huì)不同)old_position = { X: e.clientX, Y: e.clientY };//獲取當(dāng)前選擇層的偏移量offset = $("#div_caijian").offset();//修改選擇層背景色$("#div_caijian").css({ "background-color": "White" });//獲取相對(duì)坐標(biāo)與偏移量的相差值var x1 = e.clientX - offset.left;var y1 = e.clientY - offset.top;//綁定鼠標(biāo)移動(dòng)事件$("#div_caijian").mousemove(function (k) {//獲取移動(dòng)后的偏移量offset = $("#div_caijian").offset();//限制選擇層只能在固定的區(qū)域移動(dòng),限制X最小值if ((k.clientX - x1 - 73) <= 0) {k.clientX = 73 + x1;}//限制X最大值if ((k.clientX - x1 - 73) >= 155) {k.clientX = 155 + 73 + x1;}//限制Y最小值if ((k.clientY - y1 - 63) <= 0) {k.clientY = 63 + y1;}//限制Y最大值if ((k.clientY - y1 - 63) >= 115) {k.clientY = 115 + 63 + y1;}//移動(dòng)后的相對(duì)坐標(biāo)減去相差值得到移動(dòng)后的位置,獲取X值x = k.clientX - x1;//獲取Y值y = k.clientY - y1;//設(shè)置選擇層的位置$("#div_caijian").css({left: x,top: y});//PS:下面的這些值都是自己定義的,可以更改//PS:顯示圖片層距離左上角X=73,Y=63//所以移動(dòng)后的偏移量應(yīng)當(dāng)減去上面的值即offset.left - 73,offset.top - 63//移動(dòng)層的最大X偏移量為155,最大Y偏移量為115//下面的100=為顯示而動(dòng)態(tài)移動(dòng)圖片的寬度img_liulan-選擇層寬度div_caijian/下面圖片的寬度div_img*為顯示而動(dòng)態(tài)移動(dòng)圖片的寬度img_liulanvar x2 = (offset.left - 73) / 155 * 100;//下面的75=為顯示而動(dòng)態(tài)移動(dòng)圖片的高度img_liulan-選擇層高度div_caijian/下面圖片的高度div_img*為顯示而動(dòng)態(tài)移動(dòng)圖片的高度img_liulanvar y2 = (offset.top - 63) / 115 * 75;//設(shè)置為顯示而動(dòng)態(tài)移動(dòng)圖片的位置$("#img_liulan").css({left: 0 - x2,top: 0 - y2});//顯示選擇層最新的偏移量減去73的值$("#txt_left").val(offset.left - 73);//顯示選擇層最新的偏移量減去63的值$("#txt_top").val(offset.top - 63);});//綁定選擇層鼠標(biāo)離開(kāi)時(shí)的事件$("#div_caijian").mouseup(function (k) {//去除掉選擇層移動(dòng)時(shí)的樣式,將背景設(shè)置透明$("#div_caijian").css({ "background-color": "transparent" });//去除掉選增層移動(dòng)事件$("#div_caijian").unbind("mousemove");});});//綁定頁(yè)面級(jí)鼠標(biāo)離開(kāi)時(shí)的事件(強(qiáng)化作用)$(document).mouseup(function () {//去除掉選擇層移動(dòng)時(shí)的樣式,將背景設(shè)置透明$("#div_caijian").css({ "background-color": "transparent" });//去除掉選增層移動(dòng)事件$("#div_caijian").unbind("mousemove");});};ASP.NET處理坐標(biāo),截取圖片
protected void Button1_Click(object sender, EventArgs e){//獲取顯示選擇層最新的偏移量減去73的值string left = txt_left.Text;//獲取顯示選擇層最新的偏移量減去63的值string top = txt_top.Text;//PS:因?yàn)橐厝D片,所以會(huì)先生成一個(gè)新的文件便于截取//生成新的文件名(GUID格式)string fileName = "";//圖片的格式string Extension = "";//要截取的圖片寬度int width=0;//要截取的圖片高度int height=0;//要截取的圖片路徑DirectoryInfo path = new DirectoryInfo(Server.MapPath("~/Images"));foreach (FileInfo file in path.GetFiles()){//指定文件名if (file.Name.Substring(0,file.Name.IndexOf("."))=="Chrysanthemum"){//獲取圖片格式Extension = file.Extension;//獲取新文件名稱fileName = Guid.NewGuid().ToString() + file.Extension;//保存新文件File.Copy(Server.MapPath("~/Images") + "/" + file.Name, Server.MapPath("~/Images") + "/" + fileName);}}//如果新文件生成成功if (fileName!=""){//加載要截取的文件System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("~/Images") + "/" + fileName);//獲取要截取文件的寬度width=image.Width;//獲取要截取文件的高度height=image.Height;//獲取新圖片的寬度//240->顯示選擇層的寬度在頁(yè)面上//240 * width / (240 + 155) ->選擇層的寬度/(選擇層寬度+最大偏移量)*原始圖片的寬度int newWidth = 240 * width / (240 + 155);//獲取新圖片的高度//180->顯示選擇層的高度在頁(yè)面上//180 * height / (180 + 115) ->選擇層的高度/(選擇層高度+最大偏移量)*原始圖片的高度int newHeight = 180 * height / (180 + 115);//獲取新圖片在原始圖片上的左上角的X值//left->當(dāng)前X偏移量//Convert.ToInt32(left) * width / (240 + 155) ->當(dāng)前X偏移量/(選擇層高度+最大偏移量)*原始圖片的寬度int x = Convert.ToInt32(left) * width / (240 + 155);//獲取新圖片在原始圖片上的左上角的Y值//top->當(dāng)前Y偏移量//Convert.ToInt32(top) * height / (180 + 115) ->當(dāng)前Y偏移量/(選擇層高度+最大偏移量)*原始圖片的寬度int y = Convert.ToInt32(top) * height / (180 + 115);//指定寬度,高度初始化新圖片Bitmap bmp = new Bitmap(newWidth, newHeight);//加載畫(huà)布Graphics graphics = Graphics.FromImage(bmp);//要生成的新圖片的大小Point[] destParal = new Point[] { new Point() { X = 0, Y = 0 }, new Point() { X = newWidth, Y = 0 }, new Point() { X = 0, Y = newHeight } };//開(kāi)始截取,參數(shù)分別是:要截取的圖片,要生成新圖片的大小,要截取圖片在原始圖片的X,Y,寬度,高度,srcRect度量單位(第三個(gè)參數(shù))graphics.DrawImage(image, destParal, new Rectangle() { X = x, Y = y, Width = newWidth, Height = newHeight }, GraphicsUnit.Pixel);//保存截取后的圖片bmp.Save(Server.MapPath("~/Images")+"/"+ Guid.NewGuid().ToString() + Extension);//釋放畫(huà)布資源graphics.Dispose();//釋放原始圖片資源image.Dispose();//用于截取的圖片F(xiàn)ile.Delete(Server.MapPath("~/Images") + "/" + fileName);}}完成
好了 基本的功能都已實(shí)現(xiàn),如果大家發(fā)現(xiàn)Bug,請(qǐng)留意 謝謝! 下載Demo
轉(zhuǎn)載于:https://www.cnblogs.com/memaxiaofeng/archive/2013/04/15/3275479.html
總結(jié)
以上是生活随笔為你收集整理的[置顶] JQuery在线截取图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： iOS开发---设计素材篇2
- 下一篇： JQuery元素操小结