Un article résout complètement le problème de la fonction d'enregistrement d'image en appuyant longuement sur les pages HTML5

Cet article présente en détail comment implémenter la fonction d'appui long pour enregistrer des images dans H5.

Un appui long pour enregistrer des images est une exigence très courante dans certaines pages promotionnelles H5, mais js n'a pas une telle capacité, vous devez donc soit vous fier aux capacités natives d'Android ou d'iOS, soit utiliser Canvas pour en dessiner une vous-même (capture d'écran). Par rapport au coût natif, le coût est trop élevé. Et il doit s'appuyer sur l'application, qui est obsolète par rapport au H5 largement diffusé et multiplateforme, le canevas est donc devenu notre méthode courante.

Le nœud d'image enregistré est de préférence une balise img : Le nœud dont vous souhaitez prendre une capture d'écran est de préférence une image avec une balise img. Après le test, s'il s'agit d'une image d'arrière-plan, elle sera un peu floue, vous devez donc le faire. y prêter une attention particulière.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // Le nœud d'image que vous souhaitez enregistrer const dom = document.querySelector('img'); // Créer un nouveau canevas const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // La largeur de l'écran visible const height = document.body.offsetHeight; La hauteur de l'écran visible const scale = window.devicePixelRadio; // devicePixelRadio de l'appareil // Agrandissez le canevas Canvas par fois, puis placez-le sur un petit écran pour résoudre le problème de flou Canvas.width = width * scale. ; Canvas.height = hauteur * scale;Canvas.getContext('2d').scale(scale, scale);html2canvas(dom, { canvas : Canvas, scale, useCORS : true, journalisation : true, width : width + 'px', hegiht: height + 'px',}).then((canvas) => { const context = canvas.getContext('2d'); // Désactivez l'anti-aliasing context.mozImageSmoothingEnabled = false; contexte .webkitImageSmoothingEnabled = false; contexte.msImageSmoothingEnabled = false; // Convertit le canevas en image canvas2Image(canvas, canvas.width, canvas.height);});

Dans des circonstances normales, la conversion au format jpeg est très bonne.

 canvas2Image(canvas, canvas.width, canvas.height) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); .drawImage(canvas, 0, 0, largeur, hauteur, 0, 0, largeur, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // Vous pouvez modifier le format selon vos besoins return img;}

Implémentez d’abord une méthode d’appui long. Après un appui long, l’image générée est ajoutée au corps et flotte de manière transparente sur l’écran.

 // Encapsuler une méthode d'appui long longPress(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // Si le temps d'appui long dépasse 800 ms, la méthode transmise sera exécutée}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Si le temps d'appui long est inférieur à 800 ms, la méthode entrante ne sera pas exécutée}, false }}// Ajoutez l'image générée à bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText = largeur:100%;hauteur:100%;position:absolue;haut:0;gauche:0;droite:0;bas:0;opacité:0;;

4. Le code complet est le suivant

 $.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 le temps d'appui long dépasse 800 ms, la méthode transmise sera exécutée}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Si le temps d'appui long est inférieur à 800 ms, la méthode entrante ne sera pas exécutée}, false }};$); ('img ').longPress(() => { saveImg();});saveImg() { // Le nœud d'image que vous souhaitez enregistrer const dom = document.querySelector('img'); Créer un nouveau canevas const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // La largeur de l'écran visible const height = document.body.offsetHeight; const scale = window.devicePixelRatio; // devicePixelRatio de l'appareil // Agrandissez le canevas Canvas par fois d'échelle, puis placez-le sur un petit écran pour résoudre le problème de flou Canvas.width = width * scale; Canvas.height = height * scale; Canvas.getContext('2d').scale(scale, scale); html2canvas(dom, { canevas : Canvas, scale, useCORS : true, journalisation : true, width : width + ' px', hauteur : hauteur + 'px', }).then((canvas) => { const context = canvas.getContext('2d'); // Désactivez l'anticrénelage context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // Le canevas est converti en image const img = canvas2Image(canvas, canvas.width, canvas. hauteur); document.body.appendChild(img); img.style.cssText = largeur:100%;hauteur:100%;position:absolue;haut:0;gauche:0;droite:0;bas:0;opacité:0;; }}canvas2Image(toile, largeur, hauteur ) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = largeur; retCanvas.height = hauteur; retCtx.drawImage(canvas, 0, 0, largeur, hauteur, 0, 0, largeur, hauteur); const img = document.createElement('img'); = retCanvas.toDataURL('image/jpeg'); // Vous pouvez modifier le format selon vos besoins return img;}

Quand j'ai commencé à le faire, j'ai lu beaucoup d'articles sur Internet et j'ai continué à essayer et à faire des erreurs. Finalement, j'ai réalisé avec plaisir la fonction d'appui long pour enregistrer des images. Après l'avoir terminé, j'ai trouvé que c'était très simple. Cet article présente complètement l’ensemble du processus. Non merci !

Ce qui précède est un article présenté par l'éditeur pour résoudre complètement la fonction d'enregistrement d'image par pression longue dans les pages HTML5. J'espère qu'il vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra. à temps !