By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,978 Members | 1,093 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,978 IT Pros & Developers. It's quick & easy.

Capture Control Into Image

100+
P: 111
I wants to capture Table contents(ie. entire table) into image file in aspx page.

How to do?.

There is a code for captuer a portion of he screen.

Cature a rectangle of the screen and save to a png file

Expand|Select|Wrap|Line Numbers
  1. var as=new ActiveXObject("ActiveScreen.Capturer");
  2. as.CaptureRect(200, 200, 400, 300);
  3. var fs=as.SaveToFile("test3.png");
  4. WScript.Echo("Image Size = " + fs.toString() + "\r\n");
But I want to capture only a particular control (Table) contents as image.
Dec 27 '07 #1
Share this Question
Share on Google+
11 Replies


gits
Expert Mod 5K+
P: 5,389
hi ...

so you may use a function like in the following example:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function get_coords(elem_id) {
  3.     var node = document.getElementById(elem_id);
  4.     var dims = {
  5.         x: node.offsetLeft,
  6.         y: node.offsetTop,
  7.         w: node.offsetWidth,
  8.         h: node.offsetHeight
  9.     };
  10.  
  11.     return dims;
  12. }
  13. </script>
  14. <body onload="get_coords('my_table');">
  15. <table id="my_table">
  16.     <tr>
  17.         <td>test</td>
  18.     </tr>
  19. </table>
  20. </body>
  21.  
that returns you an object with the coords for your CaptureRect(); method ...

kind regards
Dec 27 '07 #2

100+
P: 111
I had used this script to capture control and its contents as image


Expand|Select|Wrap|Line Numbers
  1.    <script type="text/javascript">
  2. function get_coords(elem_id) {
  3.     var node = document.getElementById(elem_id);
  4.  
  5.  
  6.     var as = new ActiveXObject("ActiveScreen.Capturer");//Here I got this error
  7.     as.CaptureRect(node.offsetLeft, node.offsetTop, node.offsetWidth, node.offsetHeight);
  8.     var fs=as.SaveToFile("C:\Documents and Settings\arun.v.DBA-CORP\Desktop\Babu\test3.png");
  9.     WScript.Echo("Image Size = " + fs.toString() + "\r\n");
  10.  
  11.     var dims = {
  12.         x: node.offsetLeft,
  13.         y: node.offsetTop,
  14.         w: node.offsetWidth,
  15.         h: node.offsetHeight
  16.     };
  17.     return dims;
  18. }
  19. </script>
Any one help me how to rectify the error.

Thanks in advance.
Jan 3 '08 #3

100+
P: 111
This script gets the height , width, left, top of the GridView.

Now I want to capture this gridview as image through this position.

How can I?.

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="JAVASCRIPT">
  2. function capture()
  3. {
  4. var node = document.getElementById("GridView1");
  5.  
  6.     var dims = {
  7.         x: node.offsetLeft,
  8.         y: node.offsetTop,
  9.         w: node.offsetWidth,
  10.         h: node.offsetHeight
  11.     };
  12. </script>
Jan 3 '08 #4

gits
Expert Mod 5K+
P: 5,389
hi ...

please keep one topic in one thread ... don't double post your question.

compare the code i provided with that you posted at least ... it will not work since it misses a bracket and the returnvalue for the dims.

as i said you simply should call the function and store the result in a variable:

Expand|Select|Wrap|Line Numbers
  1. var dims = function get_coords(elem_id);
now you could refer to the members of our dims-object like:

Expand|Select|Wrap|Line Numbers
  1. alert(dims.x);
which alerts the left top position. put it into your CaptureRect()-method and it should work.

make an attempt and post back in case you have further problems.

kind regards
Jan 3 '08 #5

gits
Expert Mod 5K+
P: 5,389
I had used this script to capture control and its contents as image


Expand|Select|Wrap|Line Numbers
  1.    <script type="text/javascript">
  2. function get_coords(elem_id) {
  3.     var node = document.getElementById(elem_id);
  4.  
  5.  
  6.     var as = new ActiveXObject("ActiveScreen.Capturer");//Here I got this error
  7.     as.CaptureRect(node.offsetLeft, node.offsetTop, node.offsetWidth, node.offsetHeight);
  8.     var fs=as.SaveToFile("C:\Documents and Settings\arun.v.DBA-CORP\Desktop\Babu\test3.png");
  9.     WScript.Echo("Image Size = " + fs.toString() + "\r\n");
  10.  
  11.     var dims = {
  12.         x: node.offsetLeft,
  13.         y: node.offsetTop,
  14.         w: node.offsetWidth,
  15.         h: node.offsetHeight
  16.     };
  17.     return dims;
  18. }
  19. </script>
Any one help me how to rectify the error.

Thanks in advance.
threads merged again ... please don't spread the topic ... keep it in one thread!

first use the following simplyfied code:

Expand|Select|Wrap|Line Numbers
  1. function get_coords(elem_id) {
  2.     var node = document.getElementById(elem_id);
  3.  
  4.     var dims = {
  5.         x: node.offsetLeft,
  6.         y: node.offsetTop,
  7.         w: node.offsetWidth,
  8.         h: node.offsetHeight
  9.     };
  10.  
  11.     var capt_obj = new ActiveXObject("ActiveScreen.Capturer");
  12.     capt_obj.CaptureRect(dims.x, dims.y, dims.w, dims.h);
  13.  
  14.     var path = "C:\\Documents and Settings\\arun.v.DBA-CORP\\Desktop\\Babu\\";
  15.     var fs = capt_obj.SaveToFile(path + 'test3.png');
  16.  
  17.     WScript.Echo("Image Size = " + fs.toString() + "\r\n");
  18. }
  19.  
show the call! how do you call that code?

kind regards
Jan 3 '08 #6

100+
P: 111
Hi,
Though that heigth, width, top, bottom I want to capture the GridView Into an image and store in one place.

There is a code for captuer a portion of the screen, This throws an exception (Microsoft JScript runtime error: Automation server can't create object).

Cature a rectangle of the screen and save to a png file
Expand|Select|Wrap|Line Numbers
  1. var as=new ActiveXObject("ActiveScreen.Capturer");
  2. as.CaptureRect(200, 200, 400, 300);
  3. var fs=as.SaveToFile("test3.png");
  4. WScript.Echo("Image Size = " + fs.toString() + "\r\n");
So I am expecting help. How to capture the gridview as image.
Jan 3 '08 #7

100+
P: 111
I called like this

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT LANGUAGE="JAVASCRIPT">
  2. function get_coords(elem_id) {
  3.     var node = document.getElementById(elem_id);
  4.  
  5.     var dims = {
  6.         x: node.offsetLeft,
  7.         y: node.offsetTop,
  8.         w: node.offsetWidth,
  9.         h: node.offsetHeight
  10.     };
  11.  
  12.     var capt_obj = new ActiveXObject("ActiveScreen.Capturer");
  13.     capt_obj.CaptureRect(dims.x, dims.y, dims.w, dims.h);
  14.  
  15.     var path = "C:\\Documents and Settings\\arun.v.DBA-CORP\\Desktop\\Babu\\";
  16.     var fs = capt_obj.SaveToFile(path + 'test3.png');
  17.  
  18.     WScript.Echo("Image Size = " + fs.toString() + "\r\n");
  19. }
  20.  
  21. </script>
  22.  
  23.  
  24. </head>
  25. <body>
  26.     <form id="form1" runat="server">
  27.     <div>
  28.         <br />
  29.         &nbsp;
  30.         <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" OnClientClick = "get_coords(GridView1);" Height="25px" />
  31.         <asp:GridView ID="GridView1" runat="server">
  32.         </asp:GridView>
  33.     </div>
  34.     </form>
  35. </body>
  36. </html>
Jan 3 '08 #8

gits
Expert Mod 5K+
P: 5,389
i assume that ID="GridView1" is not the real id of the control ... could you have a look at the source-code when the page is loaded and search for the id there?

kind regards

btw: are you sure you have access to the control? i mean does it work with fixed values?
Jan 3 '08 #9

100+
P: 111
Are you sure you have access to the control? i mean does it work with fixed values?

Yes It worked with fixed values.

In source also its id is

Expand|Select|Wrap|Line Numbers
  1. <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
  2.         <tr>
  3.             <th scope="col">Name</th><th scope="col">Age</th>
  4.         </tr><tr>
  5.             <td>Babu</td><td>26</td>
  6.         </tr>
  7.     </table>
  8.  
Thanks
Jan 4 '08 #10

gits
Expert Mod 5K+
P: 5,389
hi ...

please use code tags when posting source-code ...

could you alert elem_id at start of the get_coords()-method? ... i think you should adapt:

Expand|Select|Wrap|Line Numbers
  1. OnClientClick="get_coords('GridView1');"
since the id has to be passed as a string ...

kind regards
Jan 4 '08 #11

P: 1
Its really helpful, but this code is not working online. i have gone through the other post in which i refer that, for this screen capture user need to change their browser's security settings. From this code i am able to get all values on nodes, but image is not saving on my local machine. kindly help
Dec 30 '11 #12

Post your reply

Sign in to post your reply or Sign up for a free account.