I am doing a web application that generates a QR image (PNG format) for a URL. If the URL changes, the image changes too. Here is the HTML (size parameter indicates the size of the QR image):
<div class="image">
<img src="/img?size=150" />
download
</div>
My goal is to the image is downloaded (instead of being rendered by the browser) when a visitor clicks on the download link. How can I do this?
I searched SO and found related posts that use Javascript to download static image. Any difference here?
Update
I found out this SO link works for me.
Download File Using Javascript/jQuery
Actually there is difference the image is dynamically generated or static. Besides, it guarantees the download for any file types regardless of browser settings.
if I understood your problem well, you can do it like in my example on JsFiddle (I used jQuery here):
https://jsfiddle.net/v6qboyfm/
Here is code:
$('a').on('click', function(e) {
var src = ($(e.currentTarget).closest('.image').find('img')[0].src);
$(e.currentTarget).attr('download', src);
$(e.currentTarget).click();
e.preventDefault();
});
If you can use dynamic source for your image then you can use that in your anchor too.As far as browser is concerned ,there is no difference between an actual image and one generated dynamically through some php script.So you can use the download property trick to make it work just any using php
<div class="image">
<img src="/img?size=150" />
download
</div>
Related
Here's a question that very few ask and is very hard to find solution for in the internet.
I would like to dynamically download an image from a html tag and save that image to a local folder and than change the tag to point to the new location of the image.
For example:
<img src="http://example.com/Logo.png"
alt="" width="232">
I want to download that image to a local folder,say, C:\Logo.png.
And change the code to:
<img src="c:\Logo.png"
alt="" width="232">
I know there are a lot of long solutions.
I'm looking for a "tool" that's already out there or a really quick solution to accomplish this. There are more than 1000 tags to move.
Downloading an image from the web to your disk and assigning a new src from a saved image in your disk are 2 different things. You need to first device a way to safely save the image to your drive i.e. using curl like this, once you've established how to download an image to your disk then its a matter of assigning the URI to your src (assuming your running it on local host).
I have an image and i want, once i click it, that a particular html page is displayed into a specific div. I found several answer yet, but none of them seems to work.
I'm thinking something simple with jquery, like the answer given here: display html file in a div
What's your solution ?
Thanks in advance.
EDIT1
I want to load an internal html page ( not an external page from another webiste ) by clicking an image.
This is the code i used taking example from the answer on the link above.
<script type="text/javascript">$(document).ready(function(){$("mainscreen").load("/home/dontrythisathome/Programmazione/HTML/Progetto-Corso-Inglese/Misc/FILE/HTML/ChiSiamo.html");}</script>
"mainscreen" is the final div when i want to display the html page.
Inside the function .load() there is the path of the html page.
But no html page is displayed into the div.
EDIT2: I found the silly mistake. I use this structure: when the correct position of the elements is . I could remove also the element but i'm using CSS and i'm more comfortable to place elements than using tag options instead. Thanks for all your replies. Tomorrow i'll see if the code with jquery works.
I think your Problem is, that when you load another website using .load().
All the other websites CSS/JavaScript gets loaded and yours gets overwritten.
Could you tell us, what you are trying to accomplish?
Are you loading a html-page from your own website or an external url?
If you dont care for the styles that other website uses, you could do something like this:
.load("example.com/some.html #content");
This loads the url you specifies and just copys the content of the HTML-Element that corresponds to this selector into your target element. (ONLY INLINE-CSS will be applyed that way, you would need to do that styling manually)
EDIT: Thank you for updateing your question.
You are trying to load a file from your filesystem.
Add file:// in front of the path to your .html file.
NOTE: Especially when you are trying to use AJAX you should use a local website and work with relative paths! This makes it much easier to deploy the website afterwards as you do not have to rewrite all your URLs.
Here is jsFiddle
Your html code
<img class="img" src="http://www.lessons4living.com/images/penclchk.gif" width=100 height=100>
<div class="targetDiv"></div>
Your javascript
$(document).ready(function(){
$(".img").click(function(){ //capture the event and ignite your work
loadPage("http://fiddle.jshell.net/"); //call our function
});
});
function loadPage(link){
$.get(link,function(data){ //dont forget cross-browser rules.
$(".targetDiv").append(data) //appended in to your div
})
};
Or you can use .load function with link parametre.
Lets say you have the following HTML code.
<div id="mainscreen">click on the image to load html …</div>
<img id="js-image" src="http://cl.ly/image/0A1P1s3r2M0u/Bildschirmfoto%202014-05-24%20um%2021.59.23.png" />
And some JavaScript code (with jQuery).
var image = document.getElementById('js-image'),
mainscreen = document.getElementById('mainscreen');
$(image).on('click', function() {
$(mainscreen).load("http://fiddle.jshell.net/florianpircher/tmRy9/show/");
});
Demo: http://jsfiddle.net/florianpircher/6wXBu/1/
You can not use $("mainscreen") because that would select <mainscreen> and not #mainscreen. In jQuery, you need a CSS-selector (like $("#mainscreen")).
I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.
I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.
However this is not working. I have copied the link to the image for example:
https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg
Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />
All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />
If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?
Well no sooner had I posted this question, the answer came up!
On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.
It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:
https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg
Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!
This is in reference to this answer: Embed png image in html file using Jinja2
Is it possible to embed the base64 encoding of my image once in the Html, but use it in many places? I can use jQuery if needed.
Simply put your base64 image in an IMG tag, say with an id="logo", then wherever you want to use it just have an IMG tag with an empty "src" attribute and a class="logo". Then use jQuery to set the "src" attribute for those IMGs to the master. e.g.
jQuery:
var src = $('img#logo').attr('src');
$('img.logo').attr('src', src);
HTML:
......<img id="logo" src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="logo">
......
......<img class="logo" src="" alt="logo">
I'm glad you asked this question as it's something I wanted to do a couple of weeks ago in a lightbox clone (slimbox2). I wanted to embed the image in the javascript, rather than load it from a file, since the image is specific to the javascript (nice "next", "prev", "play", "pause" buttons) and I did not want the user to have to store them in a specific location.
BEWARE, this type of data is fine for IE8 and above but apparently not Internet Explorer 7 and below. See:
http://en.wikipedia.org/wiki/Data_URI_scheme
Regards
Neil
Load it once and use the jQuery .clone method to copy the image element.
Or, alternatively, load it from a server like a proper grown up :)
An alternative is to embed the image in CSS and use the CSS class wherever you need the image.
If you were to convert this html content into a small thumbnail image , how would you do it?
P.S. I'm trying to do this to allow users on my site to browse through their posts(containing html elements (e.g. strong, i, img tag's).
try http://www.zubrag.com/scripts/website-thumbnail-generator.php
See here:
http://www.thumbalizr.com/index.php
They have a pretty decent simple API
Simple syntax to use the API:
http://api.thumbalizr.com/?url=http://www.ford.de&width=250
Parameter:
Check http://api.thumbalizr.com for
more details.
So you can simply have <img src='http://api.thumbalizr.com/?url=http://www.yourdomain.com&width=250' />
Also see http://www.websnapr.com/ and their implementations page