Одна статья полностью решает проблему функции сохранения изображения при длительном нажатии на страницах 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; // устройствоPixelRadio устройства // Увеличьте холст Canvas в разы, а затем поместите его на маленький экран, чтобы решить проблему размытия. Canvas.width = ширина * масштаб. ; Canvas.height = высота * масштаб;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'); // Отключаем сглаживание context.mozImageSmoothingEnabled = false; контекст .webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = 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.width = ширина; retCanvas.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); // Если время длительного нажатия превышает 800 мс, будет выполнен переданный метод}, false); $this[i].addEventListener('touchend', () => {clearTimeout(timeout); // Если время длительного нажатия меньше 800 мс, входящий метод не будет выполнен}, 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 // Если время длительного нажатия превышает 800 мс, будет выполнен переданный метод}, false); $this[i].addEventListener('touchend', () => {clearTimeout(timeout); // Если время длительного нажатия меньше 800 мс, входящий метод не будет выполнен}, 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 на время масштабирования, а затем поместите его на маленький экран, чтобы решить проблему размытия Canvas.width = width * масштаб; Canvas.height = высота * масштаб; 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'); // Отключить сглаживание context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // Холст преобразуется в изображение const img = Canvas2Image(canvas, Canvas.width, Canvas. высота); document.body.appendChild(img); img.style.cssText = ширина: 100%; высота: 100%; положение: абсолютное; сверху: 0; слева: 0; справа: 0; снизу: 0; непрозрачность: 0;; }}canvas2Image (холст, ширина, высота ) { const retCanvas = document.createElement('canvas'); const retCtx = retCanvas.getContext('2d'); retCanvas.width = ширина; retCanvas.height = высота; retCtx.drawImage(холст, 0, 0, ширина, высота, 0, 0, ширина, высота); const img = document.createElement('img'); = retCanvas.toDataURL('image/jpeg'); // При необходимости вы можете изменить формат return img;}

Когда я только начал это делать, я прочитал много статей в Интернете и все время пытался и делал ошибки. Наконец, я с радостью осознал функцию длительного нажатия для сохранения изображений. После того, как я закончил, я обнаружил, что это очень просто. В этой статье полностью описан весь процесс. Нет, спасибо!

Вышеупомянутая статья представляет собой статью, представленную редактором для полной реализации функции сохранения изображения при длительном нажатии на страницах HTML5. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам. вовремя!