I have an app that allows a user to use JQuery and Javascript to add images and position them in a div dynamically.
I would like to be able to submit the div with all the HTML to a WebService and receive back an image so we have a bitmap of the result of the end user's work.
I would prefer a solution in .Net as this is what I am most familiar with but am open to pretty much anything?
I would like to be able to submit the div with all the HTML to a WebService and receive back an image
Try http://browsershots.org!
Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place.
How about this. You load the html into a webbrowser control and then use the DrawToBitmap method. It doesn't show up on intellisense and this is probably not the best solution, but it works. Observe the DocumentCompleted event and add the following code:
private void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
var bmp = new Bitmap(100, 100);
var rect = new Rectangle(webBrowser.Location.X, webBrowser.Location.Y, webBrowser.Width, webBrowser.Height);
webBrowser.DrawToBitmap(bmp, rect);
bmp.Save("test.jpg", ImageFormat.Jpeg);
}
You'll probably want to change the width and height of that bitmap object (do it in some smart way or something). Hope this helps.
EDIT: I see now that you are using a webservice for this, hence this solution probably won't work. I'll leave it here just for information's sake.
I was not able to figure out how to do this by submitting the html and receiving an image but I was able to create and ASHX handler that returns a png file based on this blog post
which was good enough for my scenario.
He uses CutyCapt to take a screen shot of an existing web page, write the image to a folder on the webserver and return it.
Related
I need to load a page within a Flex based AIR desktop app, then populate certain fields on the page. I am trying to use an HTML control to load the page, but I can't figure out how to interact with DOM elements. Is there another way to do this?
Any pointers or help would be most appreciated!
Thanks,
rw
I've had success with passing parameters from the Flex / Air app as url variables then in the HTML page (loaded with stagewebview in as3) retrieve those individual data elements using a server side technology (php, asp, etc.) then use javascript to take those values and set them as values for specific fields on the page.
I've used it both ways so for instance the html page can invoke url calls that are monitored by the flex / air app and in as3 I can watch for specific url variables (i.e. when url change is detected) that can trigger any type of action I want to happen in as3, and in the other direction the flex / air app can send data and commands/triggers to the HTML page as well.
AS3 StageWebViewBridge looks really powerful, but I havent pushed myself to get to all the benefits of it yet, I've just used standard StageWebView to suit my needs. Good luck with your project and let me know if you have any other questions with this.
Thanks for your answers - sorry for the late response, I didn't get notified via email, which I am sure is my bad....
So, I have gotten this working. Specifically, I am opening a page, populating fields in a form, submitting the form, then collecting the results. This needs much fleshing out, but the basic concept works:
<fx:Script>
<![CDATA[
private function init(e:Event):void
{
htmlCont.addEventListener(Event.COMPLETE, htmlComplete);
htmlCont.location="https://www.targetsite.com/pagewithform.html"
}
private function htmlComplete(event:Event):void
{
htmlCont.domWindow.document.getElementById("fieldToFill01").value = textInput.text;
htmlCont.removeEventListener(Event.COMPLETE, htmlComplete);
//After new page is loaded, trigger function to get data
htmlCont.addEventListener(Event.COMPLETE, getResult);
//Use htmlElement.htmlLoader to access DOM click() function.
htmlCont.htmlLoader.window.document.getElementById("ButtonID").click();
}
private function getResult(e:Event):void
{
//Getting all <p> tags for example
var returnedArray = htmlCont.htmlLoader.window.document.getElementsByTagName("p");
//Different grabs of the content of a <p> tag.
trace(returnedArray[0].innerHTML);
trace(returnedArray[0].innerText);
trace(returnedArray[0].textContent);
}
</fx:Script>
<!-- Inside your Application somewhere -->
<mx:HTML id="htmlCont" width="100%" height="100%" y="100"/>
Again, there is a lot more to be done with this, and I think I will have some regex questions soon as the formatting of my html target page leaves a lot to be desired!
Thanks for the input, sorry again for bad form in not responding.
rw
Please bear in mind that I have never used Web Workers before and I'm having some trouble wrapping my head around them.
Here's an explanation of a simplified version of what I'm doing.
My page has links to various files - some are text, some are images, etc. Each file has an image showing a generic file icon.
I want the script to replace each generic icon with a preview of the file's contents.
The script will request the file from the server (thereby adding it to the cache, like a preloader), then create a canvas and draw the preview onto it (a thumbnail for images, an excerpt of text for text files, a more specific icon for media files...) and finally replace the generic icon's source with the canvas using a data URL.
I can do this quite easily. However, I would prefer to have it in the background so that it doesn't interfere with the UI while it's working.
Before I dive right in to this, I need to know: can Workers work with a canvas, and if so how would I create one? I don't think document.createElement('canvas') would work because Workers can't access the DOM, or am I misunderstanding when all the references I've found say they "can't access the DOM"?
You cannot access the DOM from web workers. You cannot load images. You cannot create canvas elements and draw to them from web workers. For now, web workers are pretty much limited to doing ajax calls and doing compute intensive things. See this related question/answer on web workers and canvas objects: Web Workers and Canvas and this article about using webworkers to speed up image manipulation: http://blogs.msdn.com/b/eternalcoding/archive/2012/09/20/using-web-workers-to-improve-performance-of-image-manipulation.aspx
Your simplest bet is to chunk your work into small chunks (without web workers) and do a chunk at a time, do a setTimeout(), then process the next chunk of work. This will allow the UI to be responsive while still getting your work done. If there is any CPU consuming computation to be done (like doing image analysis), this can be farmed out to a web worker and the result can be sent via message back to the main thread to be put into the DOM, but if not, then just do your work in smaller chunks to keep the UI alive.
Parts of the tasks like loading images, fetching data from servers, etc... can also be done asynchronously so it won't interfere with the responsiveness of the UI anyway if done properly.
Here's the general idea of chunking:
function doMyWork() {
// state variables
// initialize state
var x, y, z;
function doChunk() {
// do a chunk of work
// updating state variables to represent how much you've done or what remains
if (more work to do) {
// schedule the next chunk
setTimeout(doChunk, 1);
}
}
// start the whole process
doChunk();
}
Another (frustrating) limitation of Web Workers is that it can't access geolocation on Chrome.
Just my two cents.
So as others have stated, you cannot access the DOM, or do any manipulations on the DOM from a web worker. However, you can outsource some of the more complete calculations on the web worker. Then once you get your return message from the web worker inside of your main JS thread, you can extract the values you need and use them on the DOM there.
This may be unrelated to your question, but you mentioned canvas so i'll share this with you.
if you need to improve the performance of drawling to canvas, I highly recommend having two canvas objects. One that's rendered to the UI, the other hidden. That way you can build everything on the hidden canvas, then draw the hidden canvas on the displayed one. It may not sound like it will do much if anything, but it will increase performance significantly.
See this link for more details about improving canvas performance.
I am developing an Windows Forms application using VB.NET that offers the user to lookup addresses on Google Maps through a Web Browser. I can also successfully show the directions between two points to the user, as well as allow the user to drag the route as he/she pleases. My question now is - is it possible for me to get the lattitude/longitude information of the route, i.e. the overview_polyline array of encoded lattitude/longitude points and save it to e.g. a text file on my computer? Or is it possible to get a list of all the addresses located both sides of the route over the entire length of the route, and then save the data to a file on my computer? I'm using HTML files to access and display the Google Maps data in the Web Browser item.
Thank you
This is actually pretty simple if your just looking for the screen coordinates.
// this probably should be in your form initialization
this.MouseClick += new MouseEventHandler(MouseClickEvent);
void MouseClickEvent(object sender, MouseEventArgs e)
{
// do whatever you need with e.Location
}
if your strictly looking for the point in the browser, you need to consider the functions
browser.PointToClient();
browser.PointToScreen();
So, this method is usable if you know exactly where your form is (easy to get its coords) and where you webbrowser control is (easy to get coords of this as well since it's just a control in your form) and then, as long as you know how many pixels from the left or right, and from the top or bottom the image will be displayed, once you get the global mouse click coords (which is easy) you can predict where it was clicked on the image.
Alternatively, there are some scarier or uglier ways to do it here...
You can use the ObjectForScripting property to embed code to do this in the webbrowser. It's ugly to say the least. MSDN has some documentation on the process here: http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.objectforscripting.aspx
Because its really ugly, maybe a better solution is to use AxWebBrowser - it's ugly too but not so scary.
In addition, I found this post of someone wanting to do it on a pdf document, and a MSFT person saying its not possible, but really what he is trying to say is that it isn't built in, even with a pdf document its still possible to predict with high to certain accuracy where it was clicked if you use the first method i described. Here is the post anyway: http://social.msdn.microsoft.com/Forums/en/csharpgeneral/thread/2c41b74a-d140-4533-9009-9fcb382dcb60
However, it is possible, and there are a few ways to do it, so don't get scared from that last link I gave ya.
Also, this post may help if you want to do it in javascript:
http://www.devx.com/tips/Tip/29285
Basically, you can add an attribute on the image through methods available in the webbrowser control, you can add something like onclick="GetCoords();" so when it is clicked, the JavaScript function will get the coords, and then you can use javascript to place the values in a hidden input field (input type="hidden") which you can add through the webbrowser control, or if there is one already on the page, you can use that. So, once you place the coords using javacript into that input field, you can easily grab the value in that using the webbrowser control, eg:
webbrowser1.document.getElementById("myHiddenInputField").value
That will get the value in that field, which you've set through JavaScript. Also, the "GetCoords()" function i mentioned is called SetValues() in the javascript method link i provided above (in the devx.com site) but I named it GetCoords because it makes more sense and didn't want to confuse you with the actual name they used, you can change this to any name you want of course. Here is the javascript they were using, this only gets the coords into a variable, doesn't put it into a hidden input field, we will need to do that in addition (at the end of the javascript SetValues/GetCoords function).
function SetValues()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
document.getElementById('divCoord').innerText = s;
}
These guys are just saving it inside a div element, which is visible to users, but you can make the div invisible if you want to use a div field, there is no advantage or disadvantage in doing that, you would just need to set the visible property to false using javascript or css, but still, it is easier to use a hidden input field so you don't need to mess with any of that.
Let me know how you get along.
is there any solution on StageWebView.loadURL(), how I can handle URLs in HTML Pages which have target="_blank"?
It's a mobile Android App. (TabbedViewApplication)
Hope someone can help.
Thx
One option is StageWebViewBridge.
StageWebViewBridge is an extended version of flash.media.StageWebView.
Extends loadString method with AS3 - JS communication.
-Extends Bitmap class, you can modify his x,y,alpha,rotation,visible, etc ( Version 1 Beta )
-Communicates Actionscript with Javascript.
-Communicates Javascript with Actionscript.
-Load local files and resources in a easy way.
-Extends loadString method with AS3 - JS communication.
-Extends loadString method to load local resources.
-Lets you take an SnapShot to use as the bitmapData of the bitmap.
StageWebViewBridge source: https://code.google.com/p/stagewebviewbridge/
I never worked with the StageWebView but I know it's really limited. When using an HTMLLoader, you can set a custom HTMLHost instance that specifies to use current HTMLLoader when opening to _blank. However, I don't think it's possible with StageWebView.
public class MyHTMLHost extends HTMLHost
{
public function MyHTMLHost(defaultBehaviors:Boolean=false)
{
super(defaultBehaviors);
}
override public function createWindow(windowCreateOptions:HTMLWindowCreateOptions):HTMLLoader
{
// all JS calls and HREFs to open a new window should use the existing window
return htmlLoader;
}
}
OK, so the only solution for this problem i could found is to load the page (containing the links) as String with the URLLoader and replace its specified parts. Finally loading it via StageWebView.loadString() method.
Problems occur when the Site is dynamic and contains JavaScript. I had also replace some relative links with absolute pathes.
That's it... but I really hope that adobe makes it possible to load those "_blank" links with the StageWebView.loadURL() method.
If you want to capture when a user clicks on a link inside your StageWebView add an an event listener for location changing event (LocationChangeEvent).
This LocationChangeEvent will include the URL they are going to and target. Then you can prevent the URL from loading, let it continue (by doing nothing) or handle it any other way including loading another URL.
If you want to load another URL first stop the loading with stageWebView.stop(). You should also call event.preventDefault(). You can then attempt to
Note: There is another event called locationChange that may be helpful.
As it was declared as an official bug, adobe QA Owner Sanjay C. added a comment: "Able to reproduce the issue with the attached project. Sending to IRB."
So, hope the next Build will come up with the fix wit it.
Best regards
A client wants the company I work for to build an expandable flash banner, I'm a dev, so my solution is: stack 2 flash banners, small one visible, big one on top of it, with display:none, catch the click event, animate the big one into position.
The client wants it done without javascript (their banner rotation network doesn't support additional javascript).
I'm baffled, as I have no clue how a flash file can modify it's own html embed code and the css styles and as far as I'm aware, it's not possible.
Any suggestions/ideas? Is there an api in flash to talk to the html file, is there some actionscript magic that could make this happen?
Thank you for your time
You can talk to the parent HTML file via the ExternalInterface API.
You can pass the call() method entire javascript functions to do what you need. This way, you don't have to add extra javascript to the parent HTML file.
For example:
ExternalInterface.call("function() { document.getElementById(\'foo\').dosomemagichere; }");