How to use javascript to pop up 'save image as' when clicking on a link

With the continuous development of Internet technology, the content of pages is becoming more and more diversified. Pictures are a very important element in web pages, and almost every web page contains some pictures. However, for some pictures that need to be kept confidential, we don't want users to view or download them directly, but want to save the pictures locally. This article will introduce how to use javascript to realize that clicking on a link will pop up "Save Image As" instead of opening the image directly.

Why do you need to click the link to pop up "Save Image As"?

In some situations where confidentiality is required, we do not want users to be able to directly view or download images. If the image is directly embedded into the web page, the user only needs to right-click the image on the page to download the image locally by saving the image. In this way, the security and privacy of the pictures cannot be guaranteed. Therefore, we need a way to control user access to and download of images.

Steps to achieve clicking on a link to pop up "Save Image As"

To achieve clicking on a link to pop up "Save Image As", you need to go through the following steps.

1. First you need to insert a link into the page, which points to the image that needs to be downloaded.

<a href="https://example.com/image.png">Download Image</a>

2. Next, you need to add a click event to the link in javascript. When the user clicks the link, JavaScript intercepts the event and executes the custom code.

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  const url = this.href;
  download(url); // 下载图片
});

3. In the click event, a download function needs to be called to save the image locally. Since JavaScript cannot save images directly, we need to create a virtual a element, point its href attribute to the image link, and simulate the user clicking the link to achieve downloading.

function download(url) {
  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = ''; // 空字符串会将文件名设置为图片的原始名称
  document.body.appendChild(a);
  a.click(); // 模拟点击a元素
  document.body.removeChild(a);
}

4. Finally, you need to set the response header on the server side and set Content-Disposition to attachment, so that the browser will regard the response as a file to be downloaded and pop up the save dialog box.

header('Content-Disposition: attachment; filename="image.png"');
readfile('image.png');

Achieve the effect

Use the above code to achieve the effect of "save image as" as follows:

1. After clicking the link, javascript intercepts the original link Click event.
2. The download function will create a virtual a element and point its href attribute to the image link.
3. Simulate clicking on a link to download images.
4. The browser pops up a save dialog box, and the user can choose to save the file locally.

Summary

This article introduces how to use javascript to achieve the effect of clicking a link to pop up "Save Image As" instead of opening it directly. This is achieved by adding a click event in javascript and calling the download function. At the same time, Content-Disposition also needs to be set on the server side to control the response header so that the browser will treat the response as a file to be downloaded. This can effectively protect the security and privacy of pictures.

The above is the detailed content of How to use javascript to pop up 'save image as' when clicking on a link. For more information, please follow other related articles on the PHP Chinese website!