Here is my issue: on my webpage I'm displaying an image that been taken from a given URL (the image been display in a div).On the backhand I'm setting up the URL with all the information.
Beside the fact that I'm showing the picture I want to print the page - means print the div with all the content...Now when I'm trying to print Because of the image that been take from the given URL I'm getting empty place where the image should be.
In order to solve it I figure it out that I need to do something in the background to save the image from the given URL so I have this code below.... How can I send what I'm getting from function to JS Code in order to combined the missing part when I print????
If someone have other solution please help me....
The URL of the Image : https://freemobilewallpaper.files.wordpress.com/2009/10/kuala3.jpg
JS Function:
//============================== //
// Print Map//
// ============================== //
function printDiv() {
How Can I print what been set in the code behind?????##!#
var test = document.getElementById("<%= divRightWrapper.ClientID %>");
document.body.innerHTML = test;
var newWin = window.open();
newWin.document.write(test.innerHTML);
newWin.print();
}
Back Code:
Dim img As Image = GetPicture(urll)
How to send it to JS?????!##$!
Private Function GetPicture(ByVal url As String) As Image
Try
url = Trim(url)
If Not url.ToLower().StartsWith("http://") Then url _
= "http://" & url
Dim web_client As New WebClient()
Dim image_stream As New _
MemoryStream(web_client.DownloadData(url))
Return Image.FromStream(image_stream)
Catch ex As Exception
End Try
Return Nothing
End Function
Basic solution:
Use a printable version page and then popup a window with that page.
I think you can pass 64base encoded version of image.
Check this:
Is it possible to put binary image data into html markup and then get the image displayed as usual in any browser?
Related
I have a Google Chrome extension I am building for adding new bookmarks to my bookmarks app.
One of the features of my bookmark app is allowing to save a screenshot image of the web page and up to 3 additional images.
IN the Chrome extension, the 3 additional images show as a text input to insert an image URL.
Under each input I have scraped the web page HTML to find all images in the page and I show them in a slider with previous and next arrow buttons to rotate and view all the images on the page. If the user likes one of the images on the page, they can select it in this slider which then converts the image to Base64 encoded string and uploads to my remote bookmark app server.
My problem is that in the image selector where I show the images from the web page, it shows a broken image for any image that was in the page and was linked with a relative path instead of a full path with a domain name in it.
(last image shown in the 4 images in this animated GIF below shows the 4th is a broken image)
If I view the page source and see a relative linked image like this...
Then this image will show as a broken image in my image selector/slider in my extension as it will then link to the image like this where the relative linked image ends up getting the extension URL in front of it...
Below is my JavaScript function which scrapes the HTML and grabs the images found in the page.
I need to detect when the image URL is a relative linked image and then inject the page URL in front of the image URL to make it a absolute path linked image.
Any ideas how to achieve this?
Relative image urls currently end up linking to the image with this as the "domain"... chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj.
I need to instead inject the URL of the web page in front of all relative linked images.
In my JS function below where it saves the Image URL to an array,
var img.src looks like this on relative URL's...
So If I could simply replace chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj with the webpage URL that would fix my problem.
The chrome extension URL is different though so would need to match that pattern.
JavaScript function to get all images in an HTML string:
/**
* Scrape webpage and get all images found in HTML
* #param string $htmlSource - HTML string of the webpage HTML
* #return array - array of HTML strings with list items and images inside each list item
*/
scrapeWebpageForImages: function($htmlSource) {
// HTML source code of the webpage passed into jQuery so we can work on it as an object
var $html = $($htmlSource);
// All images
var images = $('img', $html),
scanned = 0,
filtered = [],
ogtmp = '',
srcs = {};
// Grab the open graph image
var ogimage = $('meta[property="og:image"]', $html);
if( ogimage.length > 0 ) {
ogtmp = $('<img>').prop({
'src': $(ogimage).text(),
'class': 'opengraph',
'width': 1000, // High priority
'height': 1000
});
images.push(ogtmp);
}
var i = 0,
l = images.length,
result = '',
img;
// Cycle through all images
for(; i < l; i++) {
scanned += 1;
img = images[i];
// Have we seen this image already?
if( !! srcs[$(img, $html).attr('src')] ) {
// Yep, skip it
continue;
} else {
//////////////////////////////////////
///
/// NEED TO DETECT A RELATIVE LINKED IMAGE AND REPLACE WITH ABSOLUTE LINKED IMAGE URL
/// USING THE WEBPAGE URL
///
//////////////////////////////////////
// Nope, remember it
srcs[$(img, $html).attr('src')] = true;
result = '<li><img src="'+img.src+'" title="'+img.alt+'"></li>';
filtered.push(result);
}
} // end for loop
return filtered;
},
var url = "chrome-extension://pcfibleldhbmpjaaebaplofnlodfldfj/assets/xyz";
var myRe = /chrome-extension:\/\/[\w]*/g;
var match = myRe.exec(url);
if(match.length > 0) {
// Pattern matched
var path = url.substring(match[0].length);
url = 'whatever your base url is' + path;
} else {
console.log('Did not find a url.');
}
It's really hard to form my question title... I'm writing my own windows sidebar gadget , I want to show current moon phase , so I searched in internet for that and I got a websites that shows that :
http://www.iceinspace.com.au/moonphase.html
if I take the image url (http://www.iceinspace.com.au/moon/images/phase_150_095.jpg) and set it in image src attribute:
<img id="CurrentMoon" src="http://www.iceinspace.com.au/moon/images/phase_150_095.jpg"></img>
and I set it again when html document loads in javascript:
function showFlyout(event)
{
document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg";
}
does the picture change if it is changed in internet ??
What you say is correct, if the image at /moon/images/phase_150_095.jpg is replaced by a new image i.e. the image file is changed but the URL of the image remains same your widget would work fine, but as it happens they change the image by changing the image url ( for eg. right now it is phase_150_099.jpg ) , so if you set the src attribute of the img to a fixed URL it will display the same image. The correct solution will be :
1) Make a cross origin request to for the iceinspace using CORS or JSONP, assuming your gadgets origin is not same as www.iceinspace.com
2) Create a document object and get the image element through an XPath lookup like this
function showFlyout(event)
{
url = http://www.iceinspace.com.au/moonphase.html;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('GET', url, true);
xmlhttp.send(null);
moonphasedoc = document.implementation.createHTMLDocument("");
moonphasedoc.open("replace");
moonphasedoc.write(xmlhttp.responseText);
moonphasedoc.close();
var element = moonphasedoc.evaluate( '//body/table/tbody/tr/td[3]/p/table/tbody/tr/td/table[1]/tbody/tr/td[1]/img' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue; //just copied the Xpath from element inspector :D
document.getElementById("CurrentMoon").src = element.src;
}
P.S. This would only work if you have Access-Control-Allow-Origin: * on the iceinspace
If the image on the server (internet) changes but has the same name and is not cached, then your image will change as well, when you load it by JavaScript.
But, if the image is cached, then it will not change (you will see the old image).
To see the latest image, as present on the server, you need to append a unique string in the URL, every time you make a request.
For example,
function showFlyout(event)
{
var d = new Date();
var n = d.getTime();
document.getElementById("CurrentMoon").src = "http://www.iceinspace.com.au/moon/images/phase_150_095.jpg?v="+n;
}
I want to download a file from a url which initially shows some html, then displays a download dialog after 2-3 seconds. Obviously if I do this:
try {
URL url = new URL("http://my.url");
HttpURLConnection con = (HttpURLConnection) url.openConnection();
con.setRequestProperty("Connection", "Keep-Alive");
con.setRequestProperty("Content-Length",
Integer.toString(Integer.MAX_VALUE));
con.setReadTimeout(Integer.MAX_VALUE);
con.setConnectTimeout(Integer.MAX_VALUE);
con.connect();
bis = new BufferedInputStream(con.getInputStream(), 4096);
byteArray = IOUtils.toByteArray(bis);
FileUtils.writeByteArrayToFile(new File("myFile"), byteArray);
} catch (Exception e) {
}
I will save the displayed .html rather than the file that is displayed in the save dialog.
How should I change the code in order to do this?
I'm guessing the dialog just has some javascript which waits a couple seconds and requests the file download embedded in the dialog somewhere.
If this is the case, if you figure out what element the 'real download' is contained in, you can use JSoup, or any other html parser library to scrape the link out of the page.
You obviously only have to do that if the download link is generated dynamically.
After doing what rossa suggests, I'd suggest setting javascript breakpoints in the dialog window to figure out how exactly the real url is getting requested.
Are you sure the url is the exact location of the file you want to download? I mean, is there any redirect - you can check in your browser and use HTTP headers extension for instance to check what's going on behind the scene.
I created a coupon-creator system that uses HTML 5 canvas to spit out a jpg version of the coupon you create and since I'm not hosting the finalized jpg on a server, I am having trouble retrieving the URL. On some browsers when I drag the image into the address bar all I get is "data:" in the address bar. But on windows, if I drag it into an input field, sometimes it spits out the huge (>200 char) local-temp url. How can I use javascript(?) to find that exact temporary URL of the image generated by my coupon creator and be able to post it on an input form on the same page? Also, it'd be very helpful if you guys know the answer to this as well, as I assume it is correlated with the retrieval of the URL: When I click the link that says "Save it" after it's generated, how can I have it save the created image to the user's computer? Thanks a lot!
This is what I'm using in JS right now to generate the image:
function letsDo() {
html2canvas([document.getElementById('coupon')], {
onrendered: function (canvas) {
document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/jpeg');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var mycustomcoupon = new Image();
mycustomcoupon.src = data;
//Display the final product under this ID
document.getElementById('your_coupon').appendChild(mycustomcoupon);
document.getElementById('your_coupon_txt').style.display="block";
}
});
}
Here is the live URL of the creator: http://isleybear.com/coupon/
I ended up dumping this code into the js stated above. It was a pretty simple fix. Then to test it, I set an onclick html element to show the source.
var mycustomcoupon = document.getElementById('your_coupon');
mycustomcoupon.src = data;
}
});
}
function showSource(){
var source = document.getElementById('your_coupon').src;
alert(source);
}
I have a website written in asp.net MVC2 that shows random images, each image has an ID and the first image is a random one, however the url the visitor sees when viewing this image does not have the imageid. i want to make it so that when the user visits www.mydomain.com the query string will be updated to be something like www.mydomain.com/?imageid=12.
this way they can forward on what they see to others.
I dont mind if i set this with javascript, on the server side, or as a response redirect.
Not sure if this is the best way, but it would work, I suppose
window.onload = function(){
var images = document.getElementsByTagName('img'); //get all images
var first = images[0]; //get the first of all images
var imgid = first.id; //get the id of the first one
window.location = "www.mydomain.com?imageid="+imgid;
}