Cara menggunakan javascript untuk muncul 'simpan imej sebagai' apabila mengklik pada pautan

Dengan perkembangan berterusan teknologi Internet, kandungan halaman menjadi semakin pelbagai. Gambar adalah elemen yang sangat penting dalam halaman web, dan hampir setiap halaman web mengandungi beberapa gambar. Walau bagaimanapun, untuk sesetengah gambar yang perlu dirahsiakan, kami tidak mahu pengguna melihat atau memuat turunnya secara langsung, tetapi mahu menyimpan gambar tersebut secara setempat. Artikel ini akan memperkenalkan cara menggunakan javascript untuk menyedari bahawa mengklik pada pautan akan muncul "Simpan Imej Sebagai" dan bukannya membuka imej secara terus.

Mengapa anda perlu mengklik pautan untuk muncul "Simpan Imej Sebagai"?

Dalam beberapa situasi di mana kerahsiaan diperlukan, kami tidak mahu pengguna dapat melihat atau memuat turun imej secara terus. Jika imej dibenamkan terus ke dalam halaman web, pengguna hanya perlu klik kanan imej pada halaman untuk memuat turun imej secara setempat dengan menyimpan imej. Dengan cara ini, keselamatan dan privasi gambar tidak dapat dijamin. Oleh itu, kami memerlukan satu cara untuk mengawal akses pengguna kepada dan memuat turun imej.

Langkah-langkah untuk merealisasikan pop timbul "Simpan Gambar Sebagai" dengan mengklik pada pautan

Untuk merealisasikan pop timbul "Simpan Gambar Sebagai" dengan mengklik pada pautan, anda perlu melalui langkah berikut.

1. Pertama, anda perlu memasukkan pautan ke dalam halaman, yang menghala ke imej yang perlu dimuat turun.

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

2. Seterusnya, anda perlu menambah acara klik pada pautan dalam javascript. Apabila pengguna mengklik pautan, JavaScript memintas acara dan melaksanakan kod tersuai.

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

3. Dalam acara klik, fungsi muat turun perlu dipanggil untuk menyimpan imej secara setempat. Memandangkan JavaScript tidak boleh menyimpan imej secara langsung, kita perlu mencipta elemen maya, menghalakan atribut hrefnya ke pautan imej dan mensimulasikan pengguna mengklik pautan untuk mencapai muat turun.

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. Akhir sekali, anda perlu menetapkan pengepala respons pada bahagian pelayan dan tetapkan Pelupusan Kandungan kepada lampiran, supaya penyemak imbas akan menganggap respons sebagai fail yang akan dimuat turun , dan Kotak dialog simpan muncul.

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

Mencapai kesan

Gunakan kod di atas untuk mencapai kesan "simpan imej sebagai" seperti berikut:

1. Selepas mengklik pautan, javascript memintas acara klik pautan asal.
2. Fungsi muat turun akan mencipta elemen maya dan menghalakan atribut hrefnya ke pautan imej.
3. Simulasikan klik pada pautan untuk memuat turun imej.
4. Pelayar memunculkan kotak dialog simpan dan pengguna boleh memilih untuk menyimpan fail secara setempat.

Ringkasan

Artikel ini memperkenalkan cara menggunakan javascript untuk mencapai kesan mengklik pautan untuk muncul "Simpan Imej Sebagai" dan bukannya membukanya terus. Ini dicapai dengan menambahkan acara klik dalam javascript dan memanggil fungsi muat turun. Pada masa yang sama, Pelupusan Kandungan juga perlu ditetapkan pada bahagian pelayan untuk mengawal pengepala respons supaya penyemak imbas akan menganggap respons sebagai fail yang akan dimuat turun. Ini boleh melindungi keselamatan dan privasi gambar dengan berkesan.

Atas ialah kandungan terperinci Cara menggunakan javascript untuk muncul 'simpan imej sebagai' apabila mengklik pada pautan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!