Get image from webpage via javascript to display - javascript

I have an application that loads an image - the URL of the image however is dynamically generated.
The image URL would look like this (I get the image name through their API):
http://openweathermap.org/img/w/10d.png
That URL is created in javascript - how would I make javascript actually get the image from that URL and return the .png so I could display it?
Would ajax be best for this? The solution would have be in regular javascript as the application displaying the image only allows for basic javascript.
Edit: This is for a digital signage solution - so I need to get the .png file into javascript where I will return ThePicture so the signage can display it appropriately. So unfortunately, just adding it to the/a DOM won't work.

Related

Putting a image in a pdf generated with jsReport

I need to generate a PDF with an image in the background.
To generate the PDF I'm using jsReport.
I'm using the HTML tag image <img src="Content/img/boleta2.png" /> and this is working great, because when I open this in Firefox, the image shows up.
But when I generate the PDF, only shows the HTML without any image.
In the official page http://jsreport.net/learn/images
it says something like "To upload an image you can use simple http POST...."
But I don't understand this very well.
Content/img/boleta2.png seems like a relative path to somewhere. In every case jsreport has no idea what is the full path.
You can use html base tag to specify the root path http://www.w3schools.com/tags/tag_base.asp
Or you can use full path directly in the img src.
The image extension is used for uploading images directly into the jsreport storage where it can be later referenced. Image is uploaded usually from html jsreport studio, the mention about http POST is about using API what is an advanced use case you probably don't struggle with right now.

How to get the HTML data generated by Javascript using Python?

I'm working on a Python program to get the images from a Chinese manga/comic site. The page I'm stuck on right now is this page.
If I use a browser to open this page, on the link "右键另存此图片", I can get the image URL, which is image URL. However, I believe this part is generated by a piece of javascript code, so when I use BeautifulSoup to parse the HTML source code, the image URL is not there.
So my question is how can I get the final HTML after executing that javascript to get the image URL?

How to save part of an html page to an image or pdf either on client (javascript) or asp.net on the server side?

Is there a way to implement functionality so that a user can Right click a subsection of an Html page (say a DIV or other container element) so that that part can be saved as an image/pdf (using javascript)?
Alternatively (ideally) can this be done on the server side in ASP.NET?
The use case for this is the following:
I have some complex web pages generated in asp.NET and using the javscript Flot library for the graphs. I would like to reuse part of the html page to generate PDF reports or at least image snapshots which can easily be inserted into reports. I have looked around and it seems there is a tool wkhmltopdf which converts the entire page to PDF, however there are 2 issues:
This tool needs to be run separately, which is not friendly for end users
The tool extracts everything on the page, e.g. menus headers , footers etc.
For the second problem I could generate web pages without the headers/footers and menus, and then use the tool, but this does not solve problem 1. Ideally I would like to generate the report weekly and automatically so the user only needs to download it.
For this purpose what is really needed is some way to store as pdf or image a DIV (or other element) referenced by id. This way I would not need to write separate code to generate the reports. I realize there will be a loss of quality converting html to PDF, but for our purposes, this is not that important.
IECapt# is a new and experimental version of IECapt written in C# to render a web page into a BMP, JPEG or PNG image file.
see http://iecapt.sourceforge.net/
You will have to make some calculations, if you want to crop the captured image to your requirements, or give the tool the html u actually want as an image,instead of the whole page.
Hope this helps.
In case this can help others, I finally settled for the iTextSharp library which is very powerful and also handles svg. It does not do the general html5 to pdf dump but with a bit of code I can do most of what I need.
main website is:
http://itextpdf.com/
download:
http://sourceforge.net/projects/itextsharp/

Compare two images for equality (cross domain)

I'm looking for a way to check whether a specific image has been loaded on a webpage with Selenium IDE.
My first try was to generate a hash value of the image but this doesn't seem to be possible with javascript. I then found out that you can base64 encode an image if you load it into a canvas and then call toDataUrl(). However this doesn't work if the image is located on another domain.
My image server provides a standard "image not found"-image. I want to check if a specific image was successfully loaded by comparing the loaded image against the failure image. Do you have any ideas how this can be achieved?
Have you looked at 'selenium signature' as a plug in to the ide? https://addons.mozilla.org/en-US/firefox/addon/selenium-ide-signature/
It will make a crc32 signature of the element like *html=50D5FBD3*css=5BBF6784*img=81AD9F9D*
You'll only need the *img=81AD9F9D* portion to validate an image.

Client-Side script to read and manipulate image from the web (details...)

I want to be able to use a Greasemonkey script that can take an image from a page, scan it for the darkest pixel, and then return those coordinates to the browser.
Originally, I used a flash script... Greasemonkey embedded a local flash file that would fetch the image based on a URL in the source of the webpage, use ActionScript to get the darkest pixel, and then send a POST request with those coordinates as values.
The problem is, I only want to download the image one time. With this method, it does it twice (once in browser, once in flash). Is there a way to manipulate an image from a webpage within Javascript or with another client-side language? I tried using a Canvas, but you cannot perform the getImageData() function on images hosted on remote servers.
You could load it in flash only, and do with your image whatever you want, then if you need to show it in the page you could encode the image as base64 string of the PNG (you will need AS libraries for PNG and base64 encoding).
The next step would be to pass the string to javascript, and in Javascript you could take advantage of the ability to embed base64 images (supported in Firefox, opera, not IE).
The syntax is:
<img src='data:image/png;base64,ABCDE...'>
where "ABCDE..." is the base64 string generated in flash.
This way you would only get the image once, but still will be able to show it as a normal html image.
I used this technique in a pet project i created (www.creationempire.com/tstyles) to generate the images in a online image generator, and got the original idea from http://danielmclaren.net/2008/03/embedding-base64-image-data-into-a-webpage
Hugo

Categories

Resources