한 기사로 HTML5 페이지의 길게 누르기 이미지 저장 기능 문제를 완전히 해결했습니다.

이번 글에서는 H5에서 사진을 저장하기 위해 길게 누르기 기능을 구현하는 방법을 자세히 소개합니다.

사진을 길게 눌러 사진을 저장하는 것은 일부 H5 프로모션 페이지에서 매우 일반적인 요구 사항이지만 js에는 이러한 기능이 없으므로 Android 또는 iOS의 기본 기능을 사용하거나 캔버스를 사용하여 직접 그려야 합니다(스크린샷). 네이티브 비용에 비해 비용이 너무 높으며, 널리 유통되고 크로스 플랫폼인 H5에 비해 시대에 뒤떨어진 앱에 의존해야 하므로 캔버스가 우리의 일반적인 방법이 되었습니다.

저장된 이미지 노드는 img 태그인 것이 좋습니다. 스크린샷을 찍으려는 노드는 img 태그가 있는 이미지인 것이 바람직합니다. 테스트 후 배경 이미지인 경우 약간 흐려질 수 있으므로 다음을 수행해야 합니다. 그것에 특별한주의를 기울이십시오.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // 저장하려는 이미지 노드 const dom = document.querySelector('img') // 새 캔버스 만들기 const Canvas = document.createElement('canvas') ; const width = document.body.offsetWidth; // 보이는 화면의 너비 const height = document.body.offsetHeight; 보이는 화면의 높이 const scale = window.devicePixelRadio; // 장치의 devicePixelRadio // 크기 배만큼 캔버스 캔버스를 확대한 다음 작은 화면에 배치하여 흐림 문제를 해결합니다. ; Canvas.height = 높이 * 스케일;Canvas.getContext('2d').scale(scale, scale);html2canvas(dom, { canvas: Canvas, scale, useCORS: true, 로깅: true, 너비: width + 'px', hegiht: height + 'px',}).then((canvas) => { const context = canvas.getContext('2d'); // 앤티앨리어싱 끄기 context.mozImageSmoothingEnabled = false; 컨텍스트 .webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; // 캔버스를 이미지로 변환 canvas2Image(canvas, canvas.width, canvas.height);});

일반적인 상황에서는 jpeg 형식으로 변환하는 것이 매우 좋습니다.

 canvas2Image(canvas, canvas.width, canvas.height) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.height = height; .drawImage(캔버스, 0, 0, 너비, 높이, 0, 0, 너비, height); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // 필요에 따라 형식을 변경할 수 있습니다 return img;}

먼저 길게 누르기 방법을 구현합니다. 길게 누르면 생성된 이미지가 본문에 추가되고 화면에 투명하게 떠 있습니다.

 // 길게 누르기 방법을 캡슐화합니다. longPress(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // 길게 누르는 시간이 800ms를 초과하면 전달된 메소드가 실행됩니다.}, false); $this[i].addEventListener('touchend', () => {clearTimeout(timeout); // 길게 누르는 시간이 800ms 미만이면 들어오는 메소드가 실행되지 않습니다.}, false }}// 생성된 이미지를 bodyconst img = canvas2Image(canvas, canvas.width, canvas.height);document.body.appendChild(img);img.style.cssText =에 추가합니다. 너비:100%;높이:100%;위치:절대;상단:0;왼쪽:0;오른쪽:0;하단:0;불투명도:0;;

4. 전체 코드는 다음과 같습니다

 $.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); // 길게 누르는 시간이 800ms를 초과하면 전달된 메소드가 실행됩니다.}, false); $this[i].addEventListener('touchend', () => {clearTimeout(timeout); // 길게 누르는 시간이 800ms 미만이면 들어오는 메소드가 실행되지 않습니다.}, false); ('img').longPress(() => { saveImg();});saveImg() { // 저장하려는 이미지 노드 const dom = document.querySelector('img'); 새 캔버스 만들기 const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // 보이는 화면의 너비 const height = document.body.offsetHeight; const scale = window.devicePixelRatio; // 장치의 devicePixelRatio // 크기 배만큼 캔버스 캔버스를 확대한 다음 작은 화면에 배치하여 흐림 문제를 해결합니다. Canvas.width = width * scale; Canvas.height = height * scale; Canvas.getContext('2d').scale(scale, scale); html2canvas(dom, { canvas: Canvas, scale, useCORS: true, 로깅: true, 너비: 너비 + ' px', 높이: 높이 + 'px', }).then((canvas) => { const context = canvas.getContext('2d'); // 앤티앨리어싱 끄기 context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // 캔버스는 이미지로 변환됩니다. const img = canvas.width, canvas. 높이); document.body.appendChild(img); img.style.cssText = width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;; }}canvas2Image(캔버스, 너비, 높이 ) { const retCanvas = document.createElement('canvas') const retCtx = retCanvas.getContext('2d'); retCanvas.width = 너비; retCanvas.height = 높이; retCtx.drawImage(canvas, 0, 0, 너비, 높이, 0, 0, 너비, 높이); const img = document.createElement('img'); = retCanvas.toDataURL('image/jpeg'); // 필요에 따라 형식을 변경할 수 있습니다. return img;}

처음 시작할 때는 인터넷에서 많은 글을 보고 계속해서 시도하고 실수도 하다가 마침내 사진을 길게 눌러 저장하는 기능을 알게 되었고, 다 하고 나니 아주 간단하다는 걸 깨달았습니다. 이 기사에서는 전체 과정을 완벽하게 소개합니다. 감사합니다.

위 내용은 HTML5 페이지의 길게 누르기 그림 저장 기능을 완전히 해결하기 위해 편집자가 소개한 글입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 편집자가 답변해 드리겠습니다. 시간에!