Un artículo resuelve completamente el problema de la función de guardar imágenes manteniendo presionada la página HTML5

Este artículo presenta en detalle cómo implementar la función de pulsación prolongada para guardar imágenes en H5.

Pulsar prolongadamente para guardar imágenes es un requisito muy común en algunas páginas promocionales de H5, pero js no tiene esa capacidad, por lo que debe confiar en las capacidades nativas de Android o iOS, o usar Canvas para dibujar una usted mismo (captura de pantalla). En comparación con el costo nativo, el costo es demasiado alto y debe depender de la aplicación, que está desactualizada en comparación con el H5 multiplataforma y de amplia circulación, por lo que el lienzo se ha convertido en nuestro método común.

El nodo de imagen guardada es preferiblemente una etiqueta img: el nodo del que desea tomar una captura de pantalla es preferiblemente una imagen con una etiqueta img. Después de la prueba, si es una imagen de fondo, estará un poco borrosa, por lo que debe hacerlo. preste especial atención a ello.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // El nodo de imagen que desea guardar const dom = document.querySelector('img'); // Crea un nuevo lienzo const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // El ancho de la pantalla visible const height = document.body.offsetHeight; La altura de la pantalla visible const scale = window.devicePixelRadio; // dispositivoPixelRadio del dispositivo // Amplíe el lienzo del lienzo en tiempos de escala y luego colóquelo en una pantalla pequeña para resolver el problema de desenfoque Canvas.width = ancho * escala. ; Canvas.height = altura * escala;Canvas.getContext('2d').scale(escala, escala);html2canvas(dom, { lienzo: Lienzo, escala, useCORS: verdadero, registro: verdadero, ancho: ancho + 'px', alto: alto + 'px',}).then((canvas) => { const context = canvas.getContext('2d'); // Desactiva el suavizado context.mozImageSmoothingEnabled = false; contexto .webkitImageSmoothingEnabled = falso; contexto.msImageSmoothingEnabled = falso; // Convertir lienzo en imagen canvas2Image(canvas, canvas.width, canvas.height);});

En circunstancias normales, la conversión al formato jpeg es muy buena.

 canvas2Image(canvas, canvas.width, canvas.height) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = ancho; .drawImage(lienzo, 0, 0, ancho, alto, 0, 0, ancho, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // Puedes cambiar el formato según sea necesario return img;}

Primero implemente un método de pulsación larga. Después de una pulsación larga, la imagen generada se agrega al cuerpo y flota de forma transparente en la pantalla.

 // Encapsula un método de pulsación larga longPress(fn) { let timeout = 0; const $this = this; let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // Si el tiempo de pulsación prolongada supera los 800 ms, se ejecutará el método pasado}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Si el tiempo de pulsación prolongada es inferior a 800 ms, el método entrante no se ejecutará}, false }}// Agregue la imagen generada a bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText = ancho:100%;alto:100%;posición:absoluta;arriba:0;izquierda:0;derecha:0;abajo:0;opacidad:0;;

4. El código completo es el siguiente.

 $.fn.longPress = function(fn) { let timeout = 0; const $this = this for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart' , () => { timeout = setTimeout(fn, 800); // Si el tiempo de pulsación prolongada supera los 800 ms, se ejecutará el método pasado}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Si el tiempo de pulsación prolongada es inferior a 800 ms, el método entrante no se ejecutará}, false }};$ ('img ').longPress(() => { saveImg();});saveImg() { // El nodo de imagen que desea guardar const dom = document.querySelector('img'); Crea un nuevo lienzo const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // El ancho de la pantalla visible const height = document.body.offsetHeight; const scale = window.devicePixelRatio; // devicePixelRatio del dispositivo // Amplíe el lienzo del lienzo en tiempos de escala y luego colóquelo en una pantalla pequeña para resolver el problema de desenfoque Canvas.width = ancho * escala; Canvas.height = altura * escala; Canvas.getContext('2d').scale(scale, escala, html2canvas(dom, { lienzo: Canvas, escala, useCORS: verdadero, registro: verdadero, ancho: ancho + ' px', altura: altura + 'px', }).then((canvas) => { const context = canvas.getContext('2d'); // Desactivar el suavizado context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false // El lienzo se convierte en una imagen const img = canvas2Image(canvas, canvas.width, canvas. altura); documento.cuerpo.appendChild(img); img.style.cssText = ancho:100%;alto:100%;posición:absoluta;arriba:0;izquierda:0;derecha:0;abajo:0;opacidad:0; }}canvas2Image(lienzo, ancho, alto ) { const retCanvas = document.createElement('lienzo'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = ancho; retCanvas.height = alto; retCtx.drawImage(lienzo, 0, 0, ancho, alto, 0, 0, ancho, alto); = retCanvas.toDataURL('image/jpeg'); // Puedes cambiar el formato según sea necesario return img;}

Cuando comencé a hacerlo, leí muchos artículos en Internet y seguí intentándolo y cometiendo errores. Finalmente, felizmente me di cuenta de la función de presionar prolongadamente para guardar imágenes. Después de terminarla, descubrí que era muy simple. Este artículo presenta completamente todo el proceso. ¡No, gracias!

Lo anterior es un artículo presentado por el editor para resolver completamente la función de guardar imagen con pulsación larga en páginas HTML5. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá. ¡a tiempo!