Ein Artikel löst das Problem der Funktion zum Speichern von Bildern durch langes Drücken auf HTML5-Seiten vollständig

In diesem Artikel wird detailliert beschrieben, wie die Funktion zum Speichern von Bildern durch langes Drücken in H5 implementiert wird.

Langes Drücken zum Speichern von Bildern ist auf einigen H5-Werbeseiten eine sehr häufige Anforderung, aber js verfügt nicht über eine solche Funktion. Sie müssen sich also entweder auf die nativen Funktionen von Android oder iOS verlassen oder Canvas verwenden, um selbst eines zu zeichnen (Screenshot). Im Vergleich zu den nativen Kosten sind die Kosten zu hoch und müssen auf der App basieren, die im Vergleich zum weit verbreiteten und plattformübergreifenden H5 veraltet ist, sodass Canvas zu unserer gängigen Methode geworden ist.

Der gespeicherte Bildknoten ist vorzugsweise ein IMG-Tag: Der Knoten, von dem Sie einen Screenshot machen möchten, ist vorzugsweise ein Bild mit einem IMG-Tag. Wenn es sich nach dem Test um ein Hintergrundbild handelt, ist es etwas verschwommen, also müssen Sie es tun Achten Sie besonders darauf.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // Der Bildknoten, den Sie speichern möchten const dom = document.querySelector('img'); // Eine neue Leinwand erstellen const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // Die Breite des sichtbaren Bildschirms const height = document.body.offsetHeight; Die Höhe des sichtbaren Bildschirms const scale = window.devicePixelRadio; // devicePixelRadio des Geräts // Vergrößern Sie die Canvas-Leinwand um das Skalierungsfache und platzieren Sie sie dann auf einem kleinen Bildschirm, um das Unschärfeproblem zu lösen ; Canvas.height = height * scale;Canvas.getContext('2d').scale(scale, scale);html2canvas(dom, { Canvas: Canvas, Scale, useCORS: true, logging: true, width: width + 'px', hegiht: height + 'px',}).then((canvas) => { const context = canvas.getContext('2d'); // Anti-Aliasing ausschalten context.mozImageSmoothingEnabled = false; context .webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; // Canvas in Bild konvertieren canvas2Image(canvas, canvas.width, canvas.height);});

Unter normalen Umständen ist die Konvertierung in das JPEG-Format sehr gut.

 canvas2Image(canvas, canvas.width, canvas.height) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.height = height; .drawImage(canvas, 0, 0, width, height, 0, 0, width, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // Sie können das Format nach Bedarf ändern. return img;}

Implementieren Sie zunächst eine Methode mit langem Drücken. Nach langem Drücken wird das generierte Bild an den Körper angehängt und schwebt transparent auf dem Bildschirm.

 // Eine Long-Press-Methode kapseln longPress(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // Wenn die lange Druckzeit 800 ms überschreitet, wird die übergebene Methode ausgeführt}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Wenn die lange Druckzeit weniger als 800 ms beträgt, wird die eingehende Methode nicht ausgeführt}, false }}// Fügen Sie das generierte Bild zu bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText = hinzu Breite: 100 %; Höhe: 100 %; Position: absolut; oben: 0; links: 0; rechts: 0; unten: 0; Deckkraft: 0;;

4. Der vollständige Code lautet wie folgt

 $.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); // Wenn die lange Druckzeit 800 ms überschreitet, wird die übergebene Methode ausgeführt}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Wenn die lange Druckzeit weniger als 800 ms beträgt, wird die eingehende Methode nicht ausgeführt}, false }};$ ('img ').longPress(() => { saveImg();});saveImg() { // Der Bildknoten, den Sie speichern möchten const dom = document.querySelector('img'); Erstellen Sie eine neue Leinwand const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // Die Breite des sichtbaren Bildschirms const height = document.body.offsetHeight; const scale = window.devicePixelRatio; // devicePixelRatio des Geräts // Vergrößern Sie die Canvas-Leinwand um das Skalierungsfache und platzieren Sie sie dann auf einem kleinen Bildschirm, um das Unschärfeproblem zu lösen Canvas.width = width * scale; Canvas.height = height * scale; Canvas.getContext('2d').scale(scale, scale); px', hegiht: height + 'px', }).then((canvas) => { const context = canvas.getContext('2d'); // Anti-Aliasing ausschalten context.mozImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // Canvas wird in ein Bild konvertiert const img = canvas2Image(canvas, canvas.width, canvas. height); document.body.appendChild(img); img.style.cssText = width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;; }}canvas2Image(canvas, width, height ) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = width; retCanvas.height = height; retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height); = retCanvas.toDataURL('image/jpeg'); // Sie können das Format nach Bedarf ändern return img;}

Als ich damit anfing, las ich viele Artikel im Internet und machte immer wieder Fehler. Schließlich wurde mir die Funktion des langen Drückens zum Speichern von Bildern klar. Nachdem ich damit fertig war, stellte ich fest, dass es sehr einfach war. In diesem Artikel wird der gesamte Prozess vollständig vorgestellt. Nein, danke!

Der obige Artikel wurde vom Herausgeber eingeführt, um die Funktion zum Speichern von Bildern auf HTML5-Seiten vollständig zu lösen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht rechtzeitig!