Um artigo resolve completamente o problema da função de salvar imagem ao pressionar longamente em páginas HTML5

Este artigo apresenta em detalhes como implementar a função de pressionamento longo para salvar imagens no H5.

Manter pressionado para salvar imagens é um requisito muito comum em algumas páginas promocionais do H5, mas js não tem esse recurso, então você deve confiar nos recursos nativos do Android ou iOS ou usar o canvas para desenhar uma você mesmo (captura de tela). Comparado com o custo nativo, o custo é muito alto e deve contar com o aplicativo, que está desatualizado em comparação com o H5 de ampla circulação e plataforma cruzada, então o canvas se tornou nosso método comum.

O nó da imagem salva é preferencialmente uma tag img: O nó do qual você deseja fazer uma captura de tela é preferencialmente uma imagem com uma tag img. Após o teste, se for uma imagem de fundo, ficará um pouco desfocado, então você precisa. preste atenção especial a isso.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // O nó da imagem que você deseja salvar const dom = document.querySelector('img'); // Crie uma nova tela const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // A largura da tela visível const height = document.body.offsetHeight; A altura da tela visível const scale = window.devicePixelRadio; // devicePixelRadio do dispositivo // Amplie a tela do Canvas por escala e coloque-a em uma tela pequena para resolver o problema de desfoque Canvas.width = width * scale. ; Canvas.height = altura * escala;Canvas.getContext('2d').scale(escala, escala);html2canvas(dom, { canvas: Canvas, escala, useCORS: true, logging: true, largura: width + 'px', hegiht: height + 'px',}).then((canvas) => { const context = canvas.getContext('2d'); // Desativar anti-aliasing context.mozImageSmoothingEnabled = false; contexto .webkitImageSmoothingEnabled = falso contexto.msImageSmoothingEnabled = falso contexto.imageSmoothingEnabled = falso; // Converte tela em imagem canvas2Image(canvas, canvas.width, canvas.height);});

Em circunstâncias normais, a conversão para o formato JPEG é muito boa.

 canvas2Image(canvas, canvas.width, canvas.height) { const retCanvas = document.createElement('canvas'); .drawImage(canvas, 0, 0, largura, altura, 0, 0, largura, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg');

Primeiro, implemente um método de toque longo. Após um toque longo, a imagem gerada é anexada ao corpo e flutua transparentemente na tela.

 // Encapsula um método de toque longo longPress(fn) { let const $this = this for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // Se o tempo de pressionamento longo exceder 800ms, o método passado será executado}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Se o tempo de pressionamento longo for menor que 800ms, o método recebido não será executado}, false }}// Adicione a imagem gerada ao bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText = largura:100%;altura:100%;posição:absoluta;superior:0;esquerda:0;direita:0;inferior:0;opacidade:0;;

4. O código completo é o seguinte

 $.fn.longPress = function(fn) { deixe o tempo limite = 0; , () => { timeout = setTimeout(fn, 800); // Se o tempo de pressionamento longo exceder 800ms, o método passado será executado}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // Se o tempo de pressionamento longo for menor que 800ms, o método recebido não será executado}, false }});$); ('img ').longPress(() => { saveImg();});saveImg() { // O nó da imagem que você deseja salvar const dom = document.querySelector('img'); Crie uma nova tela const Canvas = document.createElement('canvas'); // A largura da tela visível const height = document.body.offsetHeight; const scale = window.devicePixelRatio; // devicePixelRatio do dispositivo // Amplie a tela do Canvas em tempos de escala e coloque-a em uma tela pequena para resolver o problema de desfoque Canvas.width = width * escala; Canvas.height = altura * escala; Canvas.getContext('2d').scale(escala, escala); px', hegiht: altura + 'px', }).then((canvas) => { const context = canvas.getContext('2d'); // Desative o anti-aliasing context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; altura);document.body.appendChild(img); img.style.cssText = largura:100%;altura:100%;posição:absoluta;topo:0;esquerda:0;direita:0;fundo:0;opacidade:0; }}canvas2Image(canvas, largura, altura ) { const retCanvas = document.createElement('canvas'); retCanvas.width = largura; retCanvas.height = altura; retCtx.drawImage(canvas, 0, 0, largura, altura, 0, 0, largura, altura); = retCanvas.toDataURL('image/jpeg'); // Você pode alterar o formato conforme necessário return img;}

Quando comecei a fazer isso, li muitos artigos na Internet e continuei tentando e cometendo erros. Finalmente, percebi com alegria a função de pressionar longamente para salvar as fotos. Este artigo apresenta todo o processo. Não, obrigado!

O artigo acima é um artigo apresentado pelo editor para resolver completamente a função de salvar imagem ao pressionar longamente nas páginas HTML5. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá. a tempo!