div 区域内有子div2个,如果根据div显示的内容截图保存

问题描述

div区域内有子div2个,如果根据div显示的内容截图保存,或者后台根据hammer.js得的x,y坐标截图保存图片我可以将当前显示的图片的<inputid="posX"name="posX"value="0"type="hidden"><inputid="posY"name="posY"value="0"type="hidden"><inputid="scale"name="scale"value="1"type="hidden"><inputid="rotation"name="rotation"value="0"type="hidden"><inputid="maskheight"name="maskheight"value=""type="hidden"><inputid="THeight"name="THeight"value=""type="hidden">这些参数传到后台,下面test1就是截图区域<divid="test1"><divid="mask"class="test1_mask"><imgid="maskimg"src="%E5%9B%BE%E7%89%87%E8%A3%81%E5%88%872_files/a1.png"></div><divstyle="position:absolute;top:0px;left:0px;height:100%;"><imgclass="dragImg"id="rect"alt=""src="%E5%9B%BE%E7%89%87%E8%A3%81%E5%88%872_files/39492c48ba7c4252a4e7edc79d4efc84.jpg"ondragstart="returnfalse"></div><divid="tip"style="position:absolute;top:0px;width:100%;height:100%;z-index:999;"align="center"><imgstyle="margin-top:20%"id="Img1"alt=""src="%E5%9B%BE%E7%89%87%E8%A3%81%E5%88%872_files/finger.png"><br><pclass="text">点击图片可进行编辑</p></div><divid="divtxt"style="position:absolute;top:0px;width:100%;height:100%;z-index:999"align="center"><pid="ptxt"style="font-size:2.5em;margin-top:110%;width:80%;height:30%"class="text"></p></div></div>

解决方案

解决方案二:
如何根据这些参数在后台截图*图片切割*@paramimagePath原图地址*@paramx目标切片坐标X轴起点*@paramy目标切片坐标Y轴起点*@paramw目标切片宽度*@paramh目标切片高度
解决方案三:
你这些参数都是按原始图片大小来的还是按你显示的大小来的?下面是获取截图的参考代码///<summary>///获取等比例缩放的图片(高宽不一致时获取最中间部分的图片)///</summary>///<paramname="fromImage"></param>///<paramname="width">要获取的宽度</param>///<paramname="height">要获取的高度</param>///<returns></returns>publicstaticImageAdjImageToFitSize(thisImagefromImage,intwidth,intheight){Bitmapbitmap=newBitmap(width,height);Graphicsgraphics=Graphics.FromImage(bitmap);Pointpoint=newPoint(0,0);Pointpoint2=newPoint(width,0);Pointpoint3=newPoint(0,height);Point[]destPoints=newPoint[]{point,point2,point3};Rectanglerect=GetImageRectangle(fromImage);graphics.DrawImage(fromImage,destPoints,rect,GraphicsUnit.Pixel);Imageimage=Image.FromHbitmap(bitmap.GetHbitmap());bitmap.Dispose();graphics.Dispose();returnimage;}privatestaticRectangleGetImageRectangle(ImagefromImage){//居中位置获取intx=0;inty=0;intheight=fromImage.Height;intwidth=fromImage.Width;if(fromImage.Height>fromImage.Width){height=fromImage.Width;y=(fromImage.Height-fromImage.Width)/2;}else{width=fromImage.Height;x=(fromImage.Width-fromImage.Height)/2;}returnnewRectangle(x,y,width,height);}

解决方案四:
你这应该不能用吧,postx是相对的坐标,posty也是相对坐标,然后根据显示图的大小就是要截取的图大小,实际图的大小来截取的引用2楼starfd的回复:

你这些参数都是按原始图片大小来的还是按你显示的大小来的?下面是获取截图的参考代码///<summary>///获取等比例缩放的图片(高宽不一致时获取最中间部分的图片)///</summary>///<paramname="fromImage"></param>///<paramname="width">要获取的宽度</param>///<paramname="height">要获取的高度</param>///<returns></returns>publicstaticImageAdjImageToFitSize(thisImagefromImage,intwidth,intheight){Bitmapbitmap=newBitmap(width,height);Graphicsgraphics=Graphics.FromImage(bitmap);Pointpoint=newPoint(0,0);Pointpoint2=newPoint(width,0);Pointpoint3=newPoint(0,height);Point[]destPoints=newPoint[]{point,point2,point3};Rectanglerect=GetImageRectangle(fromImage);graphics.DrawImage(fromImage,destPoints,rect,GraphicsUnit.Pixel);Imageimage=Image.FromHbitmap(bitmap.GetHbitmap());bitmap.Dispose();graphics.Dispose();returnimage;}privatestaticRectangleGetImageRectangle(ImagefromImage){//居中位置获取intx=0;inty=0;intheight=fromImage.Height;intwidth=fromImage.Width;if(fromImage.Height>fromImage.Width){height=fromImage.Width;y=(fromImage.Height-fromImage.Width)/2;}else{width=fromImage.Height;x=(fromImage.Width-fromImage.Height)/2;}returnnewRectangle(x,y,width,height);}

解决方案五:
这只是给你举得例子,而且说明都写了这方法是居中截图,你要如果你的x,y,w,h都是页面上等比例过后的,那就要先换算成实际的,然后才能用

时间: 2024-11-11 22:24:31

div 区域内有子div2个,如果根据div显示的内容截图保存的相关文章

javascript 设置某DIV区域内的checkbox复选框_表单特效

<!--HTML代码片段如下: --> 复制代码 代码如下: <div id="div1"> <input type="checkbox" onclick="selectCheckBoxes('div1', this.checked)" />全选<br/> <input type="checkbox" /><br/> <input type=&quo

怎么用simple html dom获取div块内table里的tr数据

问题描述 怎么用simple html dom获取div块内table里的tr数据 <div id="id"> <style> ... } </style> <div class="tips-a tips-a-1" style="display: none;"> ... </div> <div class="tips-a tips-a-2" style=&quo

网页-html5+js手机触屏事件在一个固定的区域内实现div的移动

问题描述 html5+js手机触屏事件在一个固定的区域内实现div的移动 我想在手机网页上实现在一个固定的区域内有一个div这个div能够随着手指的滑动而改变位置,求各位大神指点迷津.. 解决方案 不知道怎么弄了,以前见别人搞过 解决方案二: .............................................好吧 解决方案三: 貌似不是用div吧是用一个浮动窗口然后他的位置属性随手势改变 解决方案四: 这个可以利用touchstart,touchmove,touchend

js-如何实现在某个固定区域内显示浮动效果啊

问题描述 如何实现在某个固定区域内显示浮动效果啊 我想实现的是,在一个大的div内放两个小div,左右排版,右侧是固定的,左侧是随着右侧的内容向下走实现浮动效果,但是不能超出最外面的那个大的div,如何实现比较简单,求指教 解决方案 div{ width:100%;height:100%; /*重要属性*/ position:relative; overflow:hidden;} leftDiv{width:30%;/*重要属性*/ position:absolute; left:0; top:

【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注. -------------------------------------------------------------------------------------------------------------- 成品图:     工具描述: 移动地图时(或改变地图级别时),只显示

JS实现超精简的链接列表在固定区域内滚动效果代码_javascript技巧

本文实例讲述了JS实现超精简的链接列表在固定区域内滚动效果代码.分享给大家供大家参考,具体如下: 这款超精简版的链接列表文字滚动代码,可在指定的区域内滚动,当然,区域大小可以自己设置的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/ 具体代码如下: <html> <HEAD> <TITLE>文字链接列表滚动</TITLE> <META

js实现固定显示区域内自动缩放图片的方法_javascript技巧

本文实例讲述了js实现固定显示区域内自动缩放图片的方法.分享给大家供大家参考.具体实现方法如下: <!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">

基于jquery的一个拖拽到指定区域内的效果_jquery

这个可与前两个不同了,这个是拖拽到指定的区域内的特效.其实逻辑方式差不多,只不过不同的是 找到目标元素,用appendTo 的方法插入到目标元素. 具体的代码如下,有兴趣者可以试下.(由于是初学,做的简单,如果有其他的方法请给下指点,我定感激不尽哈...) 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/htm

CSS网页制作教程:鼠标指向时DIV区域放大

文章简介:鼠标指向DIV区域放大. css 1 #box{ width:200px; height:200px; position:absolute;top:50%;left:50%; margin-left:-100px; margin-top:-100px; background-color:green;-moz-border-radius:6px;-webkit-border-radius:6px;} 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18