I want to extract the image from server and store it in my local system. The image is displayed as background in <img> tag. How to extract and store the image. The actual image tag is given below
<img style="background:Url('..//contactdetails?data=4512354367432554')" src="some transparent image"/>
In the above tag image is being displayed as background and src contains some transparent image.
You need to perform a request for the image and then save it on your machine.
First get the URI of the image:
var html = #"<img style=""background:Url('..//contactdetails?data=4512354367432554')"" src=""some transparent image""/>";
var regex = new Regex(#"//(?<Path>[^']+)'", RegexOptions.Singleline)
var uri = regex.Match(html).Groups["Path"].Value;
EDIT
If you are using HtmlAgilityPack (given that you already extracted the a tag) you can use the Attributes collection to get the style attribute and perform a match against the regular expression or you can use directly the OuterHtml property to match against the pattern like this:
var anchorTag = YourCodeToGetTheAnchorTag();
var attribute = anchorTag.Attributes["style"];
var match = regex.Match(attribute.Value);
var uri = match.Groups["Path"].Value;
Or, using the OuterHtml property:
var anchorTag = YourCodeToGetTheAnchorTag();
var match = regex.Match(anchorTag.OuterHtml);
var uri = match.Groups["Path"].Value
Next, concatenate the uri of the image to the directory from server, and create a request:
var fullUri = "http://www.example.com/" + uri;
var request = (HttpWebRequest)WebRequest.Create(fullUri);
Get the response and save the image:
var response = request.GetResponse();
var image = Image.FromStream(response.GetResponseStream());
image.Save("path-on-your-machine");
Related
So I'm very new to HTML and I was trying to take an txt output file, convert it into usable data, and input that data into HTML, changing various attribute values, like title and innerHTML
As an example, I was trying to use document.GetElementById("vars").search to reference the sequence of dna stored in search and set it to some button's title, but it wound up being undefined.
I'm really just confused on how to use variables, and if you have any idea as to what format I should make the file of data input for the HTML please share!
<script id = "vars" type = "text/javascript">
var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
</script>
As 'search' variable is a long string, you'd better use 'p' tag instead of 'button' tag.
try this:
var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
document.getElementById("p1").innerHTML=search;
<p id="p1">SearchContent</p>
`
Here's a rough example based on the
const seqId = "Chr23";
const search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
document.onreadystatechange = function() {
if (document.readyState == "interactive") {
document.getElementById('myButton').innerHTML = search;
}
}
<button id="myButton">MyButtonTitle</button>
data in your question.
I have a link like following
<a id="dynamicLink" href="http://www.w3schools.com?userName=test">Visit W3Schools</a>
I would like to change the value of userName from test to test1.
How to do that using javascript?
could someone help me on this?
I suggest using a library to work with URIs. It will provide some consistency. Here is an example using URI.js:
// Get our <a> element
var l = document.getElementById('dynamicLink');
// Use URI.js to work with the URI
// http://medialize.github.io/URI.js/
var uri = URI(l.href);
// Get the query string as an object
var qs = uri.query(true);
// Change our value
qs.userName = 'test1'
// Update the URI object
uri.query(qs);
// Set our new HREF on the <a> element
l.href = uri;
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.15.2/URI.min.js"></script>
<a id="dynamicLink" href="http://www.w3schools.com?userName=test&someOtherKey=val">Visit W3Schools</a>
Try this:
document.getElementById("dynamicLink").href.replace("userName", "test1");
This should change the value of userName in href to test1
I searched stackoverflow , similar question doesn't exist.
Just wanted to know if there was any short html shortcut to activate hyperlinks whenever there is http://www. between div tags. thanks for info.
No. HTML provides no methods to search an element for text that looks like it might be a URL and turn it into a link.
There are, however, numerous questions about using programming languages to modify documents in a similar fashion.
try this code that detects url in text
jsfiddle: http://jsfiddle.net/6u5eM/1/
function findUrls( text ) //the text you want to search a url for
{
var source = (text || '').toString();
var urlArray = [];
var url;
var matchArray;
// Regular expression to find FTP, HTTP(S) and email URLs.
var regexToken = /(((ftp|https?):\/\/)[\-\w#:%_\+.~#?,&\/\/=]+)|((mailto:)?[_.\w-]+#([\w][\w\-]+\.)+[a-zA-Z]{2,3})/g;
// Iterate through any URLs in the text.
while( (matchArray = regexToken.exec( source )) !== null )
{
var token = matchArray[0];
urlArray.push( token );
}
return urlArray;
}
alert( findUrls( 'http://www.site.com fejisojfiosf fsehiofes ' ) ); //returns url from text
How do you store a canvas that contains images using the toDataURL method? Everything works fine for text and drawing, but I don't know how to handle images. Any help would be appreciated. Thanks
I have modified my question as follows:
This works when the image is pulled directly from a .png. However, when I call the Google Charts API, toDataURL doesn't work even though the image renders correctly on the canvas. Google Charts is returning a .png. Anyone have any ideas? Thanks.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8">
function test() {
var c = document.getElementById("drawing-canvas");
var cxt = c.getContext("2d");
// This doesn't work.
//var imgsrc = 'http://chart.apis.google.com/chart?cht=tx&chf=bg,s,ffffff&chco=000000&
chl=a';
// This works
var imgsrc = 'chart.png';
var img = new Image();
img.src = imgsrc;
cxt.drawImage(img,0,0);
}
function wr() {
var cc = document.getElementById("drawing-canvas");
var url = cc.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
</script>
</head>
<body onload = "test();">
<canvas id="drawing-canvas" width = "500px" height = "500px" style="background-color:
#ffffff; border: 2px solid #000000;">
Your browser does not support the canvas element.
</canvas>
<input type = "button" value = "go" onclick = "wr();">
</body>
</html>
First of all, your chart didn't even render on the canvas when I tested it. You need to wait for the image to load. Your chart.png image probably loads instantaneously since it's cached, but the one generated by Google Charts API isn't. This is what you should do:
var img = new Image();
img.onload = function()
{
cxt.drawImage(img,0,0);
}
img.src = imgsrc;
Aside from that, you must be getting a SECURITY_ERR in your browser's console. This is because the Canvas security model doesn't allow you to export images coming from an external URL. You should use a server-side language to save the Google Charts image to your server, then load it from there.
The HTML canvas element has a method called toDataURL, that will return a data URL image representing the canvas. You can check the documentation API on the MDN.
Specifically, it says about toDataURL:
toDataURL(in optional DOMString type, in any ...args)
returns DOMString
Returns a data: URL containing a representation of the image in the format specified by type (defaults to PNG).
If the height or width of the canvas is 0, "data:," representing the empty string, is returned.
If the type requested is not image/png, and the returned value starts with data:image/png, then the requested type is not supported.
Chrome supports the image/webp type.
If the requested type is image/jpeg or image/webp, then the second argument, if it is between 0.0 and 1.0, is treated as indicating image quality; if the second argument is anything else, the default value for image quality is used. Other arguments are ignored.
And provides and example on how to use it:
function test() {
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = url;
document.body.appendChild(newImg);
}
In this example, we use the dataURL as the source attribute of an img element, but you can do whatever you want you it (like storing it somewhere, or sending it to the server with an ajax call).
Note that most of the methods involved in drawing on canvas are methods of drawing context (obtained by a call to getContext), while this method is one of the canvas element.
I'm pulling in a xml-file with just one result in it. One of the nodes is picture, which contains a link to a picture. This is the xml-file:
<artist>
<id>502</id>
<name>Bad Religion</name>
<picture>http://userserve-ak.last.fm/serve/500/46612615/Bad Religion BR 2010.jpg</picture>
<twitter></twitter>
</artist>
I've tested the url, and it's correct. This is how I try to bind the url to the image instance (artistPic), but it's not working. Displaying the artist name does work.
var artist:XMLList = new XMLList(event.result);
artistPic.source = artist.picture;
lblArtistName.text = artist.name;
That's because artist.picture returns an XMLList object. Try the following code :
var artist:XML = new XML(event.result);
artistPic.source = String(artist.picture[0]);
lblArtistName.text = artist.name; // This one is probably transtyped automagically by Flex.