Satu artikel sepenuhnya memecahkan masalah fungsi penyimpanan gambar yang ditekan lama di halaman HTML5

Artikel ini memperkenalkan secara rinci bagaimana menerapkan fungsi menekan lama untuk menyimpan gambar di H5.

Tekan lama untuk menyimpan gambar adalah persyaratan yang sangat umum di beberapa halaman promosi H5, namun js tidak memiliki kemampuan seperti itu, jadi Anda harus mengandalkan kemampuan asli Android atau ios, atau menggunakan kanvas untuk menggambarnya sendiri (tangkapan layar). Dibandingkan dengan biaya asli, biayanya terlalu tinggi. Dan harus bergantung pada aplikasi yang sudah ketinggalan zaman dibandingkan dengan H5 yang beredar luas dan lintas platform, sehingga kanvas telah menjadi metode umum kami.

Node gambar yang disimpan sebaiknya berupa tag img: Node yang ingin Anda ambil tangkapan layarnya sebaiknya berupa gambar dengan tag img. Setelah pengujian, jika itu adalah gambar latar, maka akan agak buram, jadi Anda perlu melakukannya memberikan perhatian khusus padanya.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // Node gambar yang ingin Anda simpan const dom = document.querySelector('img'); // Buat kanvas baru const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // Lebar layar yang terlihat const height = document.body.offsetHeight; Ketinggian layar yang terlihat const scale = window.devicePixelRadio; // devicePixelRadio perangkat // Perbesar kanvas Canvas berdasarkan skala kali, lalu letakkan di layar kecil untuk mengatasi masalah blur ; Canvas.height = tinggi * skala;Canvas.getContext('2d').scale(scale, scale);html2canvas(dom, { canvas: Canvas, scale, useCORS: true, logging: true, lebar: lebar + 'px', tinggi: tinggi + 'px',}).then((kanvas) => { const konteks = kanvas.getContext('2d'); // Matikan anti-aliasing konteks.mozImageSmoothingEnabled = false; konteks .webkitImageSmoothingEnabled = salah; konteks.msImageSmoothingEnabled = salah; konteks.imageSmoothingEnabled = salah; // Ubah kanvas menjadi gambar canvas2Image(kanvas, kanvas.lebar, kanvas.tinggi);});

Dalam keadaan normal, mengkonversi ke format jpeg sangat bagus.

 kanvas2Image(kanvas, kanvas.lebar, kanvas.tinggi) { const retCanvas = dokumen.createElement('kanvas'); const retCtx = retCanvas.getContext('2d'); .drawImage(kanvas, 0, 0, lebar, tinggi, 0, 0, lebar, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // Anda dapat mengubah format sesuai kebutuhan return img;}

Pertama-tama terapkan metode tekan lama. Setelah ditekan lama, gambar yang dihasilkan ditambahkan ke badan dan mengapung secara transparan di layar.

 // Enkapsulasi metode tekan lama longPress(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // Jika waktu tekan yang lama melebihi 800ms, metode yang diteruskan akan dieksekusi}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Jika waktu tekan lama kurang dari 800 md, metode masuk tidak akan dieksekusi}, false }}// Tambahkan Gambar yang dihasilkan ke bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText = lebar:100%;tinggi:100%;posisi:mutlak;atas:0;kiri:0;kanan:0;bawah:0;opasitas:0;;

4. Kode lengkapnya adalah sebagai berikut

 $.fn.longPress = function(fn) { biarkan batas waktu = 0; const $ini = ini; untuk (biarkan i = 0; i < $ini.panjang; i++) { $ini[i].addEventListener('touchstart' , () => { timeout = setTimeout(fn, 800); // Jika waktu tekan yang lama melebihi 800ms, metode yang diteruskan akan dieksekusi}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Jika waktu tekan yang lama kurang dari 800ms, metode yang masuk tidak akan dieksekusi}, false }};$ ('img ').longPress(() => { saveImg();});saveImg() { // Node gambar yang ingin Anda simpan const dom = document.querySelector('img'); Buat kanvas baru const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // Lebar layar yang terlihat const height = document.body.offsetHeight; const scale = window.devicePixelRatio; // devicePixelRatio perangkat // Perbesar kanvas Canvas berdasarkan skala kali, lalu letakkan di layar kecil untuk mengatasi masalah blur Canvas.width = width * skala; Kanvas.tinggi = tinggi * skala; Kanvas.getContext('2d').skala(skala, skala); html2kanvas(dom, { kanvas: Kanvas, skala, penggunaanCORS: benar, logging: benar, lebar: lebar + ' px', tinggi: tinggi + 'px', }).then((kanvas) => { const konteks = kanvas.getContext('2d'); // Matikan anti-aliasing konteks.mozImageSmoothingEnabled = false; konteks.webkitImageSmoothingEnabled = false; konteks.msImageSmoothingEnabled = false; konteks.imageSmoothingEnabled = false; tinggi); dokumen.body.appendChild(img); img.style.cssText = lebar:100%;tinggi:100%;posisi:absolute;atas:0;kiri:0;kanan:0;bawah:0;opacity:0;; }}canvas2Image(kanvas, lebar, tinggi ) { const retCanvas = dokumen.createElement('kanvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = lebar; retCanvas.height = tinggi; retCtx.drawImage(kanvas, 0, 0, lebar, tinggi, 0, 0, lebar, tinggi); = retCanvas.toDataURL('image/jpeg'); // Anda dapat mengubah format sesuai kebutuhan return img;}

Ketika saya pertama kali melakukannya, saya membaca banyak artikel di Internet dan terus mencoba dan membuat kesalahan. Akhirnya, saya dengan senang hati menyadari fungsi menekan lama untuk menyimpan gambar. Artikel ini memperkenalkan keseluruhan prosesnya secara lengkap.

Di atas adalah artikel yang diperkenalkan oleh editor untuk menyelesaikan sepenuhnya fungsi simpan gambar yang ditekan lama di halaman HTML5. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda pada waktunya!