I'd like to be able to set an image source from a server but also have it return extra data relating to another server-side action.
I'll try to explain.
In my index.htm file I have the following in the <body> ...
<div id="BasicDemo" >
<img id="nscreen" />
</div>
<script type="text/javascript">setImageSource()</script>
The setImageSource() simply does this...
$("#nscreen").attr("src", "/control?size=800x480");
I'm not an experienced HTML coder but I'm experienced enough at coding in general to understand that the above is an implicit HTTP GET request against server-side code in order to request an image which is used to set the <img> source.
What I'd like to do in psuedo-code is...
var someResponse = getImageAndExtra("/control?size=800x480");
$("#nscreen").attr("src", someResponse.imagePath);
var extraData = someResponse.extra;
I'm not directly in control of the server-side code but I know the developer and will be working on this.
What sort of call can I use to request both an image source as well as extra data and still be able to set the "src" attribute? Also at the other end, how would the server-side code construct the response?
I can't help feeling I'm missing something really simple here.
Your server code would have to return a web page independent of the image.
This web page would contain the path to the actual image, and then (independently), your additional data.
One very common format for this type of communication is JSON. The server constructs a page which looks like this:
{extra: "some-data", image: "/path/to/real/image"}
Just that, no HTML, and it sets the Content-Type of the response to application/x-json instead of text/html.
Then the JS does an XMLHTTPRequest to fetch the above JSON, parses the response, and then sets the src attribute.
There is no location to which you could set the image source which would let you extract additional info (barring image steganography or header tricks or other dirty dealings).
Related
I am trying to create a pixel tracker using javascript, and have included the necessary parameters in the url and have included this:
img src="/Documents/myimg.gif?utm_source="myfile"
now, I am unable to understand how to access the parameters on the servlet using java.
Could someone help me with this??
I don't have a solid knowledge of java servlet but i believe the same idea will work.
In PHP i would just create a directory with a script that return the content type image/* so for instance
/Document/index.php with the following content
<?php
$getVar=$_GET;
// do the necessary with the get vars
header('Content-Type:image/jpg');// you can adjust the content type accordingly
/* this is the image url. you can use
.htaccess and get this as the last parameter of the url just like in your question */
readfile('myimg.gif');
To make the url just like what you have currently - .htaccess will help to rewrite the url to look pretty much like anything, even take multiple images/actions with switch statement or if on the back-end
<img src="/Documents/myimg.gif?utm_source="myfile"/>
Again this is for PHP but you should get an idea.
I am using a blueprint from Amazon to develop an Alexa feed skill. In this blueprint, RSS feeds are called from an URL and transformed into JSON format and saved on Amazon S3.
This file is responsible to do that action (and it works well for the standard elements)
https://github.com/alexa/skill-sample-nodejs-feed/blob/master/lambda/custom/feedHelper.js
I need now also the enclosure url, because i want to play a podcast. I thought it will work by adding following into the feedHelper.js in Line 63:
if (item['enclosure']) {
feedItem['enclosureUrl'] = item['enclosure'].attributes['url'];
}
But the JSON which is generated on S3 with help of this file has still no enclosure element in there. Did I even call it correctly?
I also tried already:
if (item['enclosure']) {
feedItem['enclosureUrl'] = item['enclosure'].url;
}
and
if (item['enclosure']) {
feedItem['enclosureUrl'] = item['enclosure']['url'];
}
The other issue is, that the audio link is linked with https:// and Amazon don't accept HTTP...
But when I put in this address manually in the browser bar with https in front, the download works. So hopefully I am able to just change the HTTP from the enclosure tag into https like described here?
http://code.dblock.org/2017/02/09/alexa-skill-to-play-your-podcast.html
So to summarize above: I need this element from an RSS feed
<enclosure type="audio/mpeg" url="http://feeds.soundcloud.com/stream/file.mp3" length="7087881"/>
to be written in the JSON that is created with the feedHelper.js
Currently, it did not generate any enclosure element in the json, despite my code above.
Does anyone have an idea?
Thank you!
A friend helped me to find out that the normalize option of the feed parser hides the enclosure tag from me. So i turned normalize off. But then you have to call the items a bit different. Like rss:title instead of title,.. etc.
Solved the issue for me!
How to secure the src path of the image when clicks on inspect element so that user should not get to know about the actual src path..please help me with the solution and it should be done with javascript only no other tags should be used.
You can convert image into base 64 data URIs for embedding images.
Use: http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Code sample:
.sprite {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
}
This is commonly done server-side, where you have an endpoint that serves the image file to you as bytes...
You can store the images in a private location on the server where IIS/<your favourite web server> doesn't have direct access to it, but only a web app, running on it, with the required privilege is authorized to do so.
Alternatively people also "store" the images in the database itself and load it directly from there.
In either case, the response which has to be sent back has to be a stream of bytes with the correct mime type.
Edit:
Here are a couple of links to get you started if you are into ASP.NET:
http://www.codeproject.com/Articles/34084/Generic-Image-Handler-Using-IHttpHandler
http://aspalliance.com/1322_Displaying_Images_in_ASPNET_Using_HttpHandlers.5 <- this sample actually does it from a database.
Don't let the choice of front-end framework (asp.net, php, django, etc) hinder you. Search for similar techniques in your framework of choice.
Edit:
Another way if you think html5 canvas is shown here: http://www.html5canvastutorials.com/tutorials/html5-canvas-images/
However you run into the same problem. Someone can view the image url if they can see the page source. You'll have to revert to the above approach eventually.
I am aware of the hidden iFrame trick as mentioned here (http://stackoverflow.com/questions/365777/starting-file-download-with-javascript) and in other answers.
I am interested in a similar problem:
How can I use Javascript to download the current page (IE: the current DOM, or some sub-set of it) as a file?
I have a web page which fetches results from a non-deterministic query (eg. a random sample) to display to the user. I can already, via a querystring parameter, make the page return a file instead of rendering the page. I can add a "Get file version" button (our standard approach) but the results will be different to those displayed because it is a different run of the query.
Is there any way via Javascript to download the current page as a file, or is copying to the clipboard my only option?
EDIT
An option suggested by Stefan Kendall and dj_segfault is to write the result server side for later retrieval. Good idea, but unfortunately writing files server side is out of the question in this instance.
How about shudder passing the innerHTML as a post parameter to another page?
You can try with the protocol data:text/attachment
Like in:
<html>
<head>
<style>
</style>
</head>
<body>
<div id="hello">
<span>world</span>
</div>
<script>
(function(){
document.location =
'data:text/attachment;,' + //here is the trick
document.getElementById('hello').innerHTML;
//document.documentElement.innerHTML; //To Download Entire Html Source
})();
</script>
</body>
</html>
Edit after shesek comment
To add to Mic's terrific answer above, some additional points:
If you have Unicode content (Or want to preserve indentation in the source), you need to convert the string to Base64 and tell the Data URI to treat the data as such:
(function(){
document.location =
'data:text/attachment;base64,' + // Notice the new "base64" bit!
utf8_to_b64(document.getElementById('hello').innerHTML);
//utf8_to_b64(document.documentElement.innerHTML); //To Download Entire Html Source
})();
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
utf_to_b64() via MDN -- works in Chrome/FF.
You can drop this all into an anchor tag, allowing you to set the download attribute:
<a onclick="$(this).attr('href', 'data:text/plain;base64,' + utf8_to_b64($('html').clone().find('#generate').remove().end()[0].outerHTML));" download="index.html" id="generate">Generate static</a>
This will download the current page's HTML as index.html and removes the link used to generate the output. This assumes the utf8_to_b64() function from above is defined somewhere else.
Some useful links on Data URIs:
MDN article
MSDN article
Depending on the size and if support is needed for ancient browsers, but you can consider creating a dynamic file using data: URIs and link to it. I'be seen several places that do that. To get the brorwser to download rather than display it, play around with the content type you put in the URI and use the new html5 download attribute. (Sorry for any typos, I'm writing from my phone)
I don't think you're going to be able to do it exactly the way you want to. JavaScript can't create a file and download it for security reasons. Nor can it create it on the server for download.
What I would do if I were you is, on the server side, create an output file with the session ID in the name in a temp directory as you create the output for the web page, and have a button on the web page with a link to that file.
You'll probably want a separate process to remove files over a day old or something like that.
Can you not cache the query results, and store it by some key? That way you can reference the same report output forever, or until your file garbage collector comes along. This also implies that you can create static URLs to report outputs, which tends to be nice.
I send data from a browser to a servlet using JavaScript, then the server processes the data and returns an image as a response (all using xmlhttprequest). I'm sure everything is working fine because when I call the server directly, I get my image back in the browser.
What I was wondering is how, in JavaScript, do I parse my response so that I can display it as an image in an img tag?
I figure this should be fairly easy, but not sure how to do it.
You could use data URIs and set the base64 encoded binary data as the src for an image tag.
If you have control over the server, it might be cleaner to have the server give you a URL you can refer to and create a new img tag with that src.
Not sure if this would work with your application, but you could use a server-side script to dynamically serve an image, and then just use javascript to change the source of your image.
i.e.
src="image.php?param1=XXXX¶m2=XXXX"
Or just have your XMLHttpRequest return a new path to an existing image on the server and then just change the src attribute of your img.