JQuery在线截取图片

最新推荐文章于 2023-09-06 11:15:31 发布
最新推荐文章于 2023-09-06 11:15:31 发布
阅读量603 收藏
点赞数
分类专栏： Jquery

JQuery在线截取图片 ASP.NET结构开发

1.在线截取

前几天看织梦CMS,有个截图功能挺好的,可以在线选取需要截取的部分图片,然后后台截取

2.开始正文

首先构建文档,样式

[html] view plain copy print ?
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3. <title>JQuery截取图片</title>
  4. <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
  5. <style type="text/css">
  6. body{width: 100%;height: 100%;background-color: #333;}
  7. #body1{margin-top: 50px;margin-left: 50px;right: 50px;background-color: #999;width: 800px;height: 500px;}
  8. #div_img{left:70px;top:60px;border:3px solid #333;width:400px;height:300px;position:absolute; z-index:1;}
  9. #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;}
  10. #div_xinxi{ color:#333; top:450px; left:70px; position:absolute;}
  11. #div_liulan{ border:3px solid #333; width:150px; height:112.5px; left:500px; top:60px; position:absolute; overflow:hidden;}
  12. #img_liulan{ position:absolute; left:0px; top:0px;}
  13. </style>
  14. <script type="text/javascript" language="javascript">
  15. //JS
  16. </script>
  17. </head>
  18. <body>
  19. <form id="form1" runat="server">
  20. <div id="body1">
  21. <div id="div_img">
  22. <img src="Images/Chrysanthemum.jpg" width="400px" height="300px" alt="" />
  23. </div>
  24. <div id="div_xinxi">
  25. left: <asp:TextBox ID="txt_left" runat="server" Text="0"></asp:TextBox>
  26. top: <asp:TextBox ID="txt_top" runat="server" Text="0"></asp:TextBox>
  27. <asp:Button ID="Button1" runat="server" Text="裁剪" onclick="Button1_Click" />
  28. </div>
  29. <div id="div_liulan">
  30. <img id="img_liulan" src="Images/Chrysanthemum.jpg" width="250px" height="187.5px" alt="">
  31. </div>
  32. </div>
  33. <div id="div_caijian">
  34. <!-- IE下空层选不中,边框能选中,未解,有知道的请告诉LZ 谢谢~~ -->
  35. </div>
  36. </form>
  37. </body>
  38. </html> 
<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下空层选不中,边框能选中,未解,有知道的请告诉LZ 谢谢~~ -->
    </div>
    </form>
</body>
</html>

样式和内容在这里就不多介绍了 大家看看就可以了 出来的效果如下:

JavaScript的编写

[javascript] view plain copy print ?
  1. var x, y;
  2. var old_position = {};
  3. var offset = {};
  4. $(document).ready(hide);
  5. function hide() {
  6. //选择层半透明 效果酷一点
  7. $("#div_caijian").fadeTo("slow", 0.5);
  8. //选择层移动事件
  9. $("#div_caijian").mousedown(function (e) {
  10. //获取当前选择层的相对坐标(与PageX,PageY不同clientX,clientY是相对坐标 如果有滚动条值也会不同)
  11. old_position = { X: e.clientX, Y: e.clientY };
  12. //获取当前选择层的偏移量
  13. offset = $("#div_caijian").offset();
  14. //修改选择层背景色
  15. $("#div_caijian").css({ "background-color": "White" });
  16. //获取相对坐标与偏移量的相差值
  17. var x1 = e.clientX - offset.left;
  18. var y1 = e.clientY - offset.top;
  19. //绑定鼠标移动事件
  20. $("#div_caijian").mousemove(function (k) {
  21. //获取移动后的偏移量
  22. offset = $("#div_caijian").offset();
  23. //限制选择层只能在固定的区域移动,限制X最小值
  24. if ((k.clientX - x1 - 73) <= 0) {
  25. k.clientX = 73 + x1;
  26. }
  27. //限制X最大值
  28. if ((k.clientX - x1 - 73) >= 155) {
  29. k.clientX = 155 + 73 + x1;
  30. }
  31. //限制Y最小值
  32. if ((k.clientY - y1 - 63) <= 0) {
  33. k.clientY = 63 + y1;
  34. }
  35. //限制Y最大值
  36. if ((k.clientY - y1 - 63) >= 115) {
  37. k.clientY = 115 + 63 + y1;
  38. }
  39. //移动后的相对坐标减去相差值得到移动后的位置,获取X值
  40. x = k.clientX - x1;
  41. //获取Y值
  42. y = k.clientY - y1;
  43. //设置选择层的位置
  44. $("#div_caijian").css({
  45. left: x,
  46. top: y
  47. });
  48. //PS:下面的这些值都是自己定义的,可以更改
  49. //PS:显示图片层距离左上角X=73,Y=63
  50. //所以移动后的偏移量应当减去上面的值即offset.left - 73,offset.top - 63
  51. //移动层的最大X偏移量为155,最大Y偏移量为115
  52. //下面的100=为显示而动态移动图片的宽度img_liulan-选择层宽度div_caijian/下面图片的宽度div_img*为显示而动态移动图片的宽度img_liulan
  53. var x2 = (offset.left - 73) / 155 * 100;
  54. //下面的75=为显示而动态移动图片的高度img_liulan-选择层高度div_caijian/下面图片的高度div_img*为显示而动态移动图片的高度img_liulan
  55. var y2 = (offset.top - 63) / 115 * 75;
  56. //设置为显示而动态移动图片的位置
  57. $("#img_liulan").css({
  58. left: 0 - x2,
  59. top: 0 - y2
  60. });
  61. //显示选择层最新的偏移量减去73的值
  62. $("#txt_left").val(offset.left - 73);
  63. //显示选择层最新的偏移量减去63的值
  64. $("#txt_top").val(offset.top - 63);
  65. });
  66. //绑定选择层鼠标离开时的事件
  67. $("#div_caijian").mouseup(function (k) {
  68. //去除掉选择层移动时的样式,将背景设置透明
  69. $("#div_caijian").css({ "background-color": "transparent" });
  70. //去除掉选增层移动事件
  71. $("#div_caijian").unbind("mousemove");
  72. });
  73. });
  74. //绑定页面级鼠标离开时的事件(强化作用)
  75. $(document).mouseup(function () {
  76. //去除掉选择层移动时的样式,将背景设置透明
  77. $("#div_caijian").css({ "background-color": "transparent" });
  78. //去除掉选增层移动事件
  79. $("#div_caijian").unbind("mousemove");
  80. });
  81. }; 
var x, y;
        var old_position = {};
        var offset = {};
        $(document).ready(hide);
        function hide() {
            //选择层半透明 效果酷一点
            $("#div_caijian").fadeTo("slow", 0.5);
            //选择层移动事件
            $("#div_caijian").mousedown(function (e) {
                //获取当前选择层的相对坐标(与PageX,PageY不同clientX,clientY是相对坐标 如果有滚动条值也会不同)
                old_position = { X: e.clientX, Y: e.clientY };
                //获取当前选择层的偏移量
                offset = $("#div_caijian").offset();
                //修改选择层背景色
                $("#div_caijian").css({ "background-color": "White" });
                //获取相对坐标与偏移量的相差值
                var x1 = e.clientX - offset.left;
                var y1 = e.clientY - offset.top;
                //绑定鼠标移动事件
                $("#div_caijian").mousemove(function (k) {
                    //获取移动后的偏移量
                    offset = $("#div_caijian").offset();
                    //限制选择层只能在固定的区域移动,限制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;
                    }
                    //移动后的相对坐标减去相差值得到移动后的位置,获取X值
                    x = k.clientX - x1;
                    //获取Y值
                    y = k.clientY - y1;
                    //设置选择层的位置
                    $("#div_caijian").css({
                        left: x,
                        top: y
                    });
                    //PS:下面的这些值都是自己定义的,可以更改
                    //PS:显示图片层距离左上角X=73,Y=63
                    //所以移动后的偏移量应当减去上面的值即offset.left - 73,offset.top - 63
                    //移动层的最大X偏移量为155,最大Y偏移量为115
                    //下面的100=为显示而动态移动图片的宽度img_liulan-选择层宽度div_caijian/下面图片的宽度div_img*为显示而动态移动图片的宽度img_liulan
                    var x2 = (offset.left - 73) / 155 * 100;
                    //下面的75=为显示而动态移动图片的高度img_liulan-选择层高度div_caijian/下面图片的高度div_img*为显示而动态移动图片的高度img_liulan
                    var y2 = (offset.top - 63) / 115 * 75;
                    //设置为显示而动态移动图片的位置
                    $("#img_liulan").css({
                        left: 0 - x2,
                        top: 0 - y2
                    });
                    //显示选择层最新的偏移量减去73的值
                    $("#txt_left").val(offset.left - 73);
                    //显示选择层最新的偏移量减去63的值
                    $("#txt_top").val(offset.top - 63);
                });
                //绑定选择层鼠标离开时的事件
                $("#div_caijian").mouseup(function (k) {
                    //去除掉选择层移动时的样式,将背景设置透明
                    $("#div_caijian").css({ "background-color": "transparent" });
                    //去除掉选增层移动事件
                    $("#div_caijian").unbind("mousemove");
                });
            });
            //绑定页面级鼠标离开时的事件(强化作用)
            $(document).mouseup(function () {
                //去除掉选择层移动时的样式,将背景设置透明
                $("#div_caijian").css({ "background-color": "transparent" });
                //去除掉选增层移动事件
                $("#div_caijian").unbind("mousemove");
            });
        };

ASP.NET处理坐标,截取图片

[csharp] view plain copy print ?
  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3. //获取显示选择层最新的偏移量减去73的值
  4. string left = txt_left.Text;
  5. //获取显示选择层最新的偏移量减去63的值
  6. string top = txt_top.Text;
  7. //PS:因为要截取图片,所以会先生成一个新的文件便于截取
  8. //生成新的文件名(GUID格式)
  9. string fileName = "";
  10. //图片的格式
  11. string Extension = "";
  12. //要截取的图片宽度
  13. int width=0;
  14. //要截取的图片高度
  15. int height=0;
  16. //要截取的图片路径
  17. DirectoryInfo path = new DirectoryInfo(Server.MapPath("~/Images"));
  18. foreach (FileInfo file in path.GetFiles())
  19. {
  20. //指定文件名
  21. if (file.Name.Substring(0,file.Name.IndexOf("."))=="Chrysanthemum")
  22. {
  23. //获取图片格式
  24. Extension = file.Extension;
  25. //获取新文件名称
  26. fileName = Guid.NewGuid().ToString() + file.Extension;
  27. //保存新文件
  28. File.Copy(Server.MapPath("~/Images") + "/" + file.Name, Server.MapPath("~/Images") + "/" + fileName);
  29. }
  30. }
  31. //如果新文件生成成功
  32. if (fileName!="")
  33. {
  34. //加载要截取的文件
  35. System.Drawing.Image image = System.Drawing.Image.FromFile(Server.MapPath("~/Images") + "/" + fileName);
  36. //获取要截取文件的宽度
  37. width=image.Width;
  38. //获取要截取文件的高度
  39. height=image.Height;
  40. //获取新图片的宽度
  41. //240->显示选择层的宽度在页面上
  42. //240 * width / (240 + 155) ->选择层的宽度/(选择层宽度+最大偏移量)*原始图片的宽度
  43. int newWidth = 240 * width / (240 + 155);
  44. //获取新图片的高度
  45. //180->显示选择层的高度在页面上
  46. //180 * height / (180 + 115) ->选择层的高度/(选择层高度+最大偏移量)*原始图片的高度
  47. int newHeight = 180 * height / (180 + 115);
  48. //获取新图片在原始图片上的左上角的X值
  49. //left->当前X偏移量
  50. //Convert.ToInt32(left) * width / (240 + 155) ->当前X偏移量/(选择层高度+最大偏移量)*原始图片的宽度
  51. int x = Convert.ToInt32(left) * width / (240 + 155);
  52. //获取新图片在原始图片上的左上角的Y值
  53. //top->当前Y偏移量
  54. //Convert.ToInt32(top) * height / (180 + 115) ->当前Y偏移量/(选择层高度+最大偏移量)*原始图片的宽度
  55. int y = Convert.ToInt32(top) * height / (180 + 115);
  56. //指定宽度,高度初始化新图片
  57. Bitmap bmp = new Bitmap(newWidth, newHeight);
  58. //加载画布
  59. Graphics graphics = Graphics.FromImage(bmp);
  60. //要生成的新图片的大小
  61. Point[] destParal = new Point[] { new Point() { X = 0, Y = 0 }, new Point() { X = newWidth, Y = 0 }, new Point() { X = 0, Y = newHeight } };
  62. //开始截取,参数分别是:要截取的图片,要生成新图片的大小,要截取图片在原始图片的X,Y,宽度,高度,srcRect度量单位(第三个参数)
  63. graphics.DrawImage(image, destParal, new Rectangle() { X = x, Y = y, Width = newWidth, Height = newHeight }, GraphicsUnit.Pixel);
  64. //保存截取后的图片
  65. bmp.Save(Server.MapPath("~/Images")+"/"+ Guid.NewGuid().ToString() + Extension);
  66. //释放画布资源
  67. graphics.Dispose();
  68. //释放原始图片资源
  69. image.Dispose();
  70. //用于截取的图片
  71. File.Delete(Server.MapPath("~/Images") + "/" + fileName);
  72. }
  73. } 
protected void Button1_Click(object sender, EventArgs e)
    {
        //获取显示选择层最新的偏移量减去73的值
        string left = txt_left.Text;
        //获取显示选择层最新的偏移量减去63的值
        string top = txt_top.Text;
        //PS:因为要截取图片,所以会先生成一个新的文件便于截取
        //生成新的文件名(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->显示选择层的宽度在页面上
            //240 * width / (240 + 155) ->选择层的宽度/(选择层宽度+最大偏移量)*原始图片的宽度
            int newWidth = 240 * width / (240 + 155);
            //获取新图片的高度
            //180->显示选择层的高度在页面上
            //180 * height / (180 + 115) ->选择层的高度/(选择层高度+最大偏移量)*原始图片的高度
            int newHeight = 180 * height / (180 + 115);
            //获取新图片在原始图片上的左上角的X值
            //left->当前X偏移量
            //Convert.ToInt32(left) * width / (240 + 155) ->当前X偏移量/(选择层高度+最大偏移量)*原始图片的宽度
            int x = Convert.ToInt32(left) * width / (240 + 155);
            //获取新图片在原始图片上的左上角的Y值
            //top->当前Y偏移量
            //Convert.ToInt32(top) * height / (180 + 115) ->当前Y偏移量/(选择层高度+最大偏移量)*原始图片的宽度
            int y = Convert.ToInt32(top) * height / (180 + 115);
            //指定宽度,高度初始化新图片
            Bitmap bmp = new Bitmap(newWidth, newHeight);
            //加载画布
            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 } };
            //开始截取,参数分别是:要截取的图片,要生成新图片的大小,要截取图片在原始图片的X,Y,宽度,高度,srcRect度量单位(第三个参数)
            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);
            //释放画布资源
            graphics.Dispose();
            //释放原始图片资源
            image.Dispose();
            //用于截取的图片
            File.Delete(Server.MapPath("~/Images") + "/" + fileName);
        }
    }

完成

好了 基本的功能都已实现,如果大家发现Bug,请留意 谢谢! 下载Demo

唔佲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery的imgareaselect截图插件
01-18
这是利用jquery的imgareaselect进行截图的插件，使用代码请看我博客
php jq截图插件,javascript截图 jQuery插件imgAreaSelect使用详解_jquery
weixin_30995363的博客
03-17 275
为了使用户能自定义个人头像，需要提供一个对上传图片的截图功能，当前很多网站特别是SNS类网站都提供这样的功能，非常实用。主要实现的形式有两种，一种是flash截图，另一种就是javascript截图，两种方法各有秋千，关于Flash截图可以参考一下UcHome程序中头像上传功能，但这不是我要讨论的话题，我这里主要是如何实现javascript截图，利用jQuery的imgAreaSelect插件，...
Jquery会议室布局含门入口和投影位置调整，并自动截图
最新发布
化名三爷
09-06 269
1、文章中罗列了主要代码，如需使用，请前往，包中包含所有文件素材，开箱即用。
php jq截图插件,jQuery jcrop插件截图使用方法_jquery
weixin_42299089的博客
03-17 364
在后台来进行图片切割。头像截取的原理：在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度，然后将这四个值传给后台。在后台要进行放大处理：将切面放大N倍，N=原图/前台展示的头像。即X = X*原图宽/前图宽，Y = Y*原图高/前图高，W = W*原图宽/前图宽,H = H*原图高/前图高。实例：JSP:样式：大图、小图展示都需要固定高度、宽度，因为后台需要进行放大处理。即：然后...
Jquery图片截图工具（默认为图片宽度）
web开发自学
02-18 562
最近给编辑做了个截图工具 一、功能： A：图片自动载入 B：图片载入时，截取工具大小为图片大小 C：所截取图片长宽比例2.5:1 二、引用插件：jquery.Jcrop.js 三、代码 &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html;charset=UTF-8" /&gt; ...
jquery 图片截取工具jquery.imagecropper.js
10-29
《jQuery图片截取工具jquery.imagecropper.js详解》 在网页设计中，有时我们需要用户提供特定区域的图片，例如用于头像裁剪或者产品图片编辑。这时，jQuery图片截取工具jquery.imagecropper.js就能派上大用场。该...
jquery图片截取DEMO
10-24
在IT行业中，jQuery图片截取是一项常见的前端技术，主要用于用户交互式地选择并截取图片的特定区域。这个"jquery图片截取DEMO"提供了一个实际应用的例子，帮助开发者理解和实现这一功能。以下是对这个DEMO相关的知识...
jquery 图片上传并截取
07-28
5. 在服务器端根据裁剪信息截取图片并返回处理后的结果。 以上就是关于“jQuery图片上传并截取”这一主题的详细解释，希望对你有所帮助。在实际开发中，你还需要考虑错误处理、用户体验优化以及跨域、安全性等问题...
jquery 截取图片 上传
02-14
在jQuery中，我们可以方便地添加事件监听器来处理用户交互，例如点击按钮截取图片： ```javascript $('button.crop').on('click', function() { var croppedImage = canvas.toDataURL('image/jpeg'); // 假设我们...
js jquery ajax截取图片
05-26
而“js jquery ajax截取图片”这个主题涉及到的就是如何利用这些技术来处理图像，特别是对图片进行截取和优化上传过程。在网页应用中，用户可能需要上传大尺寸图片，这可能导致加载速度慢、服务器存储压力增大以及...
jquery-cropper图片在线截图+图片保存服务器
12-14
cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小，支持鼠标滚轮操作，支持图片旋转，支持触摸屏设备，支持canvas，并且支持跨浏览器使用。 附件中有核心关键代码，实例参看:test1.ftl,FileController.java文件
JQuery有用属性和方法截图
04-26
是我在多年的工作中总结出来的一些有价值的代码片段。有了这些知识就够用了
Jquery截图
09-20
Jquery截图 方便好用Jquery截图 方便好用Jquery截图 方便好用
JQuery在线截图
04-15
在线选择指定图像的要截取部分,后台截取图像,ASP.NET开发 如果发现Bug请给我留言 thanks
jquery截图功能实例
07-06
jquery截图功能实例 京华志&精华志出品 希望大家互相学习，互相进步 支持CSDN 支持微软 主要包括C# ASP.NET SQLDBA 源码 毕业设计 开题报告 答辩PPT等
jquery实现截取pc图片_如何优雅的对网页截取长图
weixin_39747087的博客
01-02 505
苏生不惑第115 篇原创文章，将本公众号设为星标，第一时间看最新文章。最近写文章想截个长图，才发现一直使用的QQ早有这个功能了，这里就整理几个pc上网页长截图的方案。qq滚动截图qq截图应该很多人用过，我平常挂qq也只是为了方便使用截图，但你可能没怎么用过qq滚动截图，具体看官方网站说明 https://kf.qq.com/faq/190624amau22190624ArMrE7.html，看我用...
jquery实现截取pc图片_jQuery实现截图拍照效果
weixin_39542093的博客
12-21 824
body,html,div,img{margin:0;padding:0;}body{cursor:crosshair;}div{width:200px;height:200px;position:absolute;}img{width:1200px;height:650px;}#photo{opacity:0.5;filter:alpha(opacity=50);margin:25px 0 0 ...
jQuery jcrop插件截图使用方法
unity3d学习者
11-21 1202
在后台来进行图片切割。 头像截取的原理：在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度，然后将这四个值传给后 台。在后台要进行放大处理：将切面放大N倍，N=原图/前台展示的头像。即X = X*原图宽/前图宽，Y = Y*原图高/前 图高，W = W*原图宽/前图宽,H = H*原图高/前图高。 实例： JSP:  代码如下:         
jquery实现截取pc图片_jquery截图插件，js截图裁剪图片Canvas截图
weixin_39559015的博客
12-21 462
这不是用js定位坐标然后上传截图的方法，而是用canvas截图转换成base64编码上传的方法。这个方法的截图是直接在前端将图片裁剪好生成图片的数据，在后端将数据转码后直接保存为图片格式的文件就可以了。用base64_encode(上传的图片数据)转码之后保存为图片文件就可以了。下面是一个用Canvas+JavascriptFileAPI实现一个图片剪切、滤镜处理、上传下载工具。注释都有，可改性...
jquery 截取字符串
08-23
要使用jQuery截取字符串，你可以使用JavaScript的字符串操作方法以及jQuery的选择器和DOM操作。下面是一个使用jQuery截取字符串的示例代码： ```javascript // 获取字符串 var str = "Hello, world!"; // 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值