Develop Reference

Download image and pdf in JavaScript resulting in CORS [duplicate]

Noob webdeveloper here.
I'm trying to download an image from an url on click. But when I use the image url as my href it just redirects to that url instead of downloading. Of course I am using the download attribute. I have tried my own code and also mulitple code blocks from other people. But all of them just redirect. I am using google chrome.
My code:
<a href = "https://autoooo.nl/wp-content/uploads/2018/12/F5144B9C-2B27-4070-828E-2361EBD702EF-400x400.jpeg" download="car" id="downloadQRCodeButtonHref">
<p>download</p>
</a>
Code I used from someone else 1(accepted answer):
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
Code I used from someone else 2:
<p> Click the image ! You can download! </p>
<?php
$image = basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically
//echo $image;
?>
<a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/sc/img/logo.png">
</a>
Some help will be appreciated. I might just be a big dum dum and overlook something extremely obvious.

The problem is because you're using a cross-domain URL. From the documentation for the download attribute:
download only works for same-origin URLs, or the blob: and data: schemes.
To fix this you need to host the image on the same domain as the parent site.

Getting images size using php or javascript / jquery - getimagesize fails

I'm using a really good lightbox script but it needs me to output the image sizes. The site I'm using is php and can resize images as they are uploaded. It does not store the images sizes in the database.
The code needs to be displayed as follows.
<a href="http://www.fullurl.com/image.jpg" data-original-url="http://www.fullurl.com/image.jpg" data-original-width="123" data-original-height="456">
<img src="http://www.fullurl.com/thumbnail-image.jpg" alt="product name" />
</a>
I've tried using getimagesize but it only works on images that have not been resized by the system. I think they are missing some vital info as images that have uploaded but not resized work fine. There are currently about 1200 images already uploaded so redoing them is not an option.
My current method is using php as follows.
<?php
$image1 = 'http://www.fullurl.com/thumbnail-image.jpg';
list($width, $height) = getimagesize($image1);
?>
<a href="http://www.fullurl.com/image.jpg" data-original-url="http://www.fullurl.com/image.jpg" data-original-width="123" data-original-height="456">
<img src="http://www.fullurl.com/thumbnail-image.jpg" alt="product name" />
</a>
If I use the following I get bool(false) as the output.
$path1 = 'http://www.fullurl.com/image.jpg';
$vals_arr1 = getimagesize($path1);
echo "<pre>";var_dump($vals_arr1);echo "</pre>";
I'm not a programmer. My question is how can I output the image info as below? I'm happy to try alternative php, jquery / javascript as is needed. Ideally it needs to be simple and fast.
<a href="http://www.fullurl.com/image.jpg" data-original-url="http://www.fullurl.com/image.jpg" data-original-width="123" data-original-height="456">

This works
$path1 = 'https://jpeg.org/images/jpeg-home.jpg';
$vals_arr1 = getimagesize($path1);
echo "<pre>";var_dump($vals_arr1);echo "</pre>";
The bug must be somewhere else. Check the URLs! Are they valid?
And check if allow_url_fopen is set to true on your server.
Else this can help: https://stackoverflow.com/a/25231517/4916265

As noted by james dot on the PHP docs website, getimagesize will download the entire image before it checks for the requested information. This is extremely slow on large images that are accessed remotely. Since the width/height is in the first few bytes of the file, there is no need to download the entire file. He wrote a function to get the size of a JPEG by streaming bytes until the proper data is found to report the width and height.
The way he wrote it will allow a remote image.
The code can be found here: http://php.net/manual/en/function.getimagesize.php#88793

Show image change URL without reload the page

How can I click an image, open the image without reloading with php and javascript?
<?php
echo '<li>
<a href="photo.php?id='.$id.'">
<div class="_th_alb">
<img src="image/'.$allbum_photos.'" >
</div></a>
</li>';
?>
with like image

What you want is called a modal.
You can see some examples right here:
http://www.w3schools.com/howto/howto_css_modal_images.asp
To the modifying URL part:
You can use
window.history.pushState('a string or object', 'Title', '?image=as1234da3sdasd');
Hope this helps

Change the src of HTML image tag to load image from a url using Javascript

Sorry to sound naive since I'm a beginner. I have been trying to load an image on my website with the image hosted somewhere else online and having a url "http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"
I have an image tag defined as below
<img id="image" src="" alt="" />
Moreover my javascript function executes the following on a button click
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg";
The URL seems to work fine, but the image doesn't show up onclick.
Am I making any mistake?
Thanks for any suggestion :)

I could see that you are using " inside here, may be the HTML would also have " so that, it might not work. You can use the following code:
<a href="#"
onclick='document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2014/05/sample.jpg"; return false'>Change</a>

I created a Jsfiddle, and it seems to work fine.
https://jsfiddle.net/ltlombardi/jvts4m3y/
var coco = function(){
document.getElementById("image").src="http://www.vapor-rage.com/wp-content/uploads/2016/02/Vapor-Rage-Small-Logo-new.png";
};
<img id="image" src="" alt="" />
Click here

Check referrer and find the href that leads to it, then trigger a click with javascript

I'm working on a WP single page portfolio that loads post content with AJAX. I read that WP doesn't need #! URLs to make it crawlable by Googlebot. If I understand it correctly, since Googlebot won't interpret ajax, it will just follow the link and index the article page.
So I removed #! from my URLs and when a post is opened I update them with .pushState.It's working fine, but if I hit F5 or if I try to load a specific URL (not the home) I fall into the page of the post (single.php).
To prevent it, I added a javascript redirection in single.php that leads users to the homepage. Then I need to open the content of the article on the homepage.
Here is the address of my site: http://www.youpiemonday.com/ (the redirection isn't online yet).
How can I tell the browser "if you're coming from this page (the referrer), trigger a click on the thumbnail which href is corresponding" (the click will load the content)?
I'm digging around this but I have no idea how to target the thumbnail correctly...
<script type="text/javascript">
$referer = document.referrer; // where we come from
$LinktoRef = $('.ProjectWrap').find("a").href; // the href in the thumbnail
console.debug($LinktoRef); // still undefined...
if ( $LinktoRef == $referer ){
find("a").trigger('click');
}
</script>
Here is what the html markup looks like:
<div id="portfolio-list">
<div class="ProjectWrap">
<?php the_post_thumbnail(); ?>
<a href="<?php the_permalink(); ?>">
<div class="contentProject">
<h4 class="ProjectTitle"><?php the_title(); ?></h4>
</div>
</a>
</div>
<div class="ProjectWrap">//same as above</div>
<div class="ProjectWrap">//same as above</div>
// and the list goes on...
</div>
I'm not really a programmer so any help would be very appreciated. And if you can comment your code, that would be invaluable to me.

Because you are probably trying to reference the element before it is rendered on the page. Use document ready or window onload and reference the link there.