One article completely solves the problem of long-press saving image function in HTML5 pages

This article introduces in detail how to implement the function of long pressing to save pictures in H5.

Long press to save pictures is a very common requirement in some H5 promotional pages, but js does not have such a capability, so you must either rely on the native capabilities of android or ios, or use canvas to draw one yourself (screenshot). Compared with the native cost, the cost is too high. And it must rely on the app, which is out of date compared to the widely circulated and cross-platform H5, so canvas has become our common method.

The saved image node is preferably an img tag: The node you want to take a screenshot of is preferably an image with an img tag. After testing, if it is a background-image, it will be a bit blurry, so you need to pay special attention to it.

 npm i html2canvas --saveimport html2canvas from 'html2canvas'; // The image node you want to save const dom = document.querySelector('img'); // Create a new canvas const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // The width of the visible screen const height = document.body.offsetHeight; // The height of the visible screen const scale = window.devicePixelRadio; // devicePixelRadio of the device // Enlarge the Canvas canvas by scale times, and then place it on a small screen to solve the blur problem. Canvas.width = width * scale; 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'); // Turn off anti-aliasing context.mozImageSmoothingEnabled = false; context .webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // Convert canvas to image canvas2Image(canvas, canvas.width, canvas.height);});

Under normal circumstances, converting to jpeg format is very good.

 canvas2Image(canvas, canvas.width, canvas.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); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // You can change the format as needed return img;}

First implement a long press method. After long press, the generated image is appended to the body and floats transparently on the screen.

 // Encapsulate a long press method longPress(fn) { let timeout = 0; const $this = this; for (let i = 0; i < $this.length; i++) { $this[i].addEventListener('touchstart ', () => { timeout = setTimeout(fn, 800); // If the long press time exceeds 800ms, the passed in method will be executed}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // If the long press time is less than 800ms, the incoming method will not be executed}, false); }}// Add the generated Image to bodyconst 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;;

4. The complete code is as follows

 $.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); // If the long press time exceeds 800ms, the passed in method will be executed}, false); $this[i].addEventListener('touchend', () => { clearTimeout(timeout); // If the long press time is less than 800ms, the incoming method will not be executed}, false); }};$('img ').longPress(() => { saveImg();});saveImg() { // The image node you want to save const dom = document.querySelector('img'); // Create a new canvas const Canvas = document.createElement('canvas'); const width = document.body.offsetWidth; // The width of the visible screen const height = document.body.offsetHeight; // The height of the visible screen const scale = window.devicePixelRatio; // devicePixelRatio of the device // Enlarge the Canvas canvas by scale times, and then place it on a small screen to solve the blur problem Canvas.width = width * scale; 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'); // Turn off anti-aliasing context.mozImageSmoothingEnabled = false; context.webkitImageSmoothingEnabled = false; context.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; // Canvas is converted to an image 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); const img = document.createElement('img'); img.src = retCanvas.toDataURL('image/jpeg'); // You can change the format as needed return img;}

When I first started doing it, I read a lot of articles on the Internet and kept trying and making mistakes. Finally, I happily realized the function of long pressing to save pictures. After I finished it, I found that it was very simple. This article completely introduces the whole process. No thanks!

The above is an article introduced by the editor to completely solve the long-press save picture function in HTML5 pages. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time!