So I was wondering, if I have a div which contains a maps of google maps rendered with some makers and I want to take a picture of that element how can I do this?.I found this solutions it's a approach of what I need but the problem it's that sending a url doesn't help me, I need the specific Div with all the markers. For the server side i'm using C# and for the cliente, asp.net with jquery. Also the google maps apiV3 to handle the maps
Take a look at the Canvas2Image library by Nihilogic Labs:
http://www.nihilogic.dk/labs/canvas2image/
Here's an example of how to take a screenshot of an element through JavaScript:
var oCanvas = document.getElementById("thecanvas");
Canvas2Image.saveAsPNG(oCanvas);
EDIT
You might also take a look at Html2Canvas and FlashCanvas too. I believe one of them has support for earlier browsers (those which don't support HTML5).
Use the method in the link you mentioned and crop the resulting image to the dimensions of your div. You can use myDiv.getBoundingClientRect() in JavaScript to get the dimensions of your div.
Using the WebBrowser control, you can manipulate the document using html or JavaScript to get the page in the state you need to take your screenshot.
Have you considered using the Google Maps Static API - this will render a map image, with markers on it, as a PNG.
Related
Basically we're using a service provided by gapphotos.com where by we can call there images into our site via an iframe. This iFrame then contains another iframe that holds the image. Problem I'm faced with is their images come in two sizes 161x161 or 320x320 roughly. All I want to do is go into these two iFrames with jQuery and alter the height/width.
var f = $('#iFramePic1');
f.load(function() {
var iF = f.contents().find('iframe');
iF.load(function() {
iF.contents().find('img').height(100);
});
});
This is the jQuery I'd used to try and attempt that but it comes back with the
Blocked a frame with origin "http://localhost:1506" from accessing a frame with
origin "http://www.gapphotos.com". Protocols, domains, and ports must match.
I've looked into EasyXDM but can't find suggestions to go 2 iFrames deep. Any help would be much appreciated as this is on a tight schedule.
That would be impossible, because the iFrame has another origin. The iFrame is not accessible, since cross domain iFrames could be easily missused for CrossSiteScripting
http://en.wikipedia.org/wiki/Same-origin_policy
i don't exacly know if this applies to css styles too, you might want to try and use a css to set your own height and width...
Is there any way to Convert HTML table to Image file? I have one HTML table which contains controls like Labels, GridView, and CheckBoxes. How can we convert this table into Image file for creating a PDF file?
This is not a trivial task. Ultimately, you need an HTML renderer to convert the HTML to pixels.
Fortunately, you don't need to write your own. You can use the WebBrowser control.
You can see some code I wrote to extract a thumbnail image from a given URL in the article Creating Website Thumbnails in ASP.NET.
If this is a one-off, load it up in your browser and take a screenshot (Alt-PrtScr on windows for just the current application)
If you need to do this repeatedly/in an automated way, you can either automate a browser control or you can use a headless browser
You should also look into WebKit2Png which will render the page in the same manner as Chrome/other webkit browsers and then save that as a png. It can optionally simulate javascript/etc too
Similarly, there's a wkhtmltopdf which works on all platforms
Converting HTML Table into Image File
$("#selfAssessmentPowerPointDownload").on('mouseover', function () {
var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable
html2canvas(element, {
onrendered: function (canvas) {
getCanvas = canvas;
var imgageData = getCanvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#selfAssessmentPowerPointDownload").attr("download", "gridData.png").attr("href", newData);
}
});
});
<button id="selfAssessmentPowerPointDownload">Download</button>
<table id="html-content-holder"></table>
Datatables is a powerful jquery plugin for working with tables. One of the option that datatables offered is make a pdf or excel from your table. You can see find many examples in it's website.
First question but I really am in a jam.
I have a webpage render which is working perfectly. However, I need to be able to control the initial display position (almost like a href #anchors in HTML) but without any access to the site content.
From as far as i can see i have no access to the scrollBars other than the bool to enable / disable..
Is there anything i can do to even force a scroll down of 20% for example, and then I can create a form to adjust later on.
Any assistance would be HUGELY appreciated although from what I have researched it seems unlikely.
I have the regular windows WebBrowser Render
private System.Windows.Forms.WebBrowser m_webBrowser;
Thanks !
--This is for c# standalone application.. Not WebBased.
Have you tried using jquery?
I personally use the animate method from jquery to scroll to certain elemnts in my webpage.
Example:
$('html, body').animate({scrollTop: $('#the-element-you-want-to-scroll-to).offset().top}, 1000);
PS: For the last parameter you can control the time it will use to scroll to destination, that offering you a nice effect.(in milliseconds)
I managed to resolve it using a strange method..
I basically injected some javascript into the rendered HTML manually.. Then the rest was easy.
i used something like this :
string updatedSource = WebBrowser.DocumentText.Replace("Google", "Foogle");
string extraSource =
"<html><body>Script goes here <br/>" +
"<div><p>BLA BLA BLA</p></div></body></html>";
WebBrowser.DocumentText = extraSource + updatedSource;
WebBrowser.Update();
Maybe it will help someone.
I am building a mobile site and the footer has an background.
I want to check if the browser supports css property, background-image, if true display background with specific html, else display a different set of html.
I am using the following :
HttpBrowserCapabilities bc = new HttpBrowserCapabilities();
I can't seem to get a check for backgrounds.
The reason why I want to check for BG-image support is coz I have to switch between 2 sets of html. 1 with html text and bg image, and the other with the text on the image - sliced for each word/link...to give the same effect.
to get information by HttpBrowserCapabilities, you have to use Request.Browser property.
HttpBrowserCapabilities browerCapabilities = Request.Browser;
I think Asp.net will automatically check the type of the browser and render the page accordingly. So if the the browser don't support background images it will not come.
Another idea to solve the issue is getting the browser type by using code, then you can show or hide the background images based on the type.
I have an asp.net page, with couple of Divs, some of these div's get the image path from database and show the image in a smaller version (thumbnail). and as soon as user click on thumbnail, I use ajax Modal popup to show the full size image, what I need to have is to have a progree image(gif), on every thumbnail image while loading the asp.net page for the first time, I konw that it is possible to use UpadePanel, but I need the actual working code,or any other way to achieve this,
Thanks in advance
Well, if you are posting back, udpate panel can work; but you can programmably in JS do this yourself, or also consider using a JS plugin like lightbox: http://www.huddletogether.com/projects/lightbox2/
Which has that feature and looks very cool.