JavaScriptを使用して、リンクをクリックしたときに「名前を付けて画像を保存」をポップアップ表示する方法

インターネット技術の継続的な発展に伴い、ページのコンテンツはますます多様化しています。画像は Web ページにおいて非常に重要な要素であり、ほぼすべての Web ページにいくつかの画像が含まれています。ただし、機密保持が必要な一部の写真については、ユーザーに直接表示またはダウンロードしてほしくないが、写真をローカルに保存したいと考えています。この記事では、JavaScriptを使用して、リンクをクリックすると画像を直接開くのではなく、「名前を付けて画像を保存」がポップアップ表示されることを実現する方法を紹介します。

なぜリンクをクリックして「名前を付けて画像を保存」を表示する必要があるのですか?

機密保持が必要な状況では、ユーザーが画像を直接表示したりダウンロードしたりできないようにする必要があります。画像が Web ページに直接埋め込まれている場合、ユーザーはページ上の画像を右クリックするだけで、画像を保存してローカルにダウンロードできます。このように、写真のセキュリティとプライバシーは保証できません。したがって、画像へのユーザーのアクセスとダウンロードを制御する方法が必要です。

リンクをクリックして「名前を付けて画像を保存」をポップアップ表示する手順

リンクをクリックして「名前を付けて画像を保存」を表示するには、次の手順を実行する必要があります。 。

1. まず、ダウンロードする必要がある画像を指すリンクをページに挿入する必要があります。

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

2. 次に、JavaScript でリンクにクリック イベントを追加する必要があります。ユーザーがリンクをクリックすると、JavaScript がイベントをインターセプトし、カスタム コードを実行します。

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

3. クリック イベントでは、画像をローカルに保存するためにダウンロード関数を呼び出す必要があります。 JavaScript は画像を直接保存できないため、仮想 a 要素を作成し、その href 属性を画像リンクにポイントし、ダウンロードを実現するためにユーザーがリンクをクリックすることをシミュレートする必要があります。

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. 最後に、サーバー側で応答ヘッダーを設定し、Content-Disposition を添付ファイルに設定する必要があります。これにより、ブラウザーは応答をダウンロードしてポップするファイルとして認識します。保存ダイアログボックスを開きます。

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

効果の実現

上記のコードを使用して、次のように「名前を付けて画像を保存」の効果を実現します。

1. リンクをクリックした後、 JavaScript は元のリンクの Click イベントをインターセプトします。
2. ダウンロード関数は、仮想 a 要素を作成し、その href 属性を画像リンクにポイントします。
3. リンクをクリックして画像をダウンロードするシミュレーションを行います。
4. ブラウザに保存ダイアログ ボックスが表示され、ユーザーはファイルをローカルに保存することを選択できます。

概要

この記事では、JavaScript を使用して、リンクを直接開くのではなく、リンクをクリックして「名前を付けて画像を保存」をポップアップ表示する効果を実現する方法を紹介します。これは、JavaScript にクリック イベントを追加し、ダウンロード関数を呼び出すことで実現されます。同時に、ブラウザーが応答をダウンロードするファイルとして扱うように、サーバー側で Content-Disposition を設定して応答ヘッダーを制御する必要もあります。これにより、写真のセキュリティとプライバシーを効果的に保護できます。

以上がJavaScriptを使用して、リンクをクリックしたときに「名前を付けて画像を保存」をポップアップ表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。