How to realize the function of saving pictures by pressing long button in HTML5 page

In this article Xiaobian for you to introduce in detail "how to achieve HTML5 page long press save picture function", detailed content, clear steps, details handled properly, I hope that this "how to achieve HTML5 page long press save picture function" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge bar.

Here are the detailed steps:

1. Html2canvas screenshot

The saved image node had better be img tag: the node you want to take screenshots had better be the image with img tag. It has been tested that if it is background-image, it will be a little blurry, so you need to pay special attention to it.

Npm I html2canvas-- saveimport html2canvas from 'html2canvas';// wants to save the picture node const dom = document.querySelector (' img'); / / create a new canvasconst Canvas = document.createElement ('canvas'); const width = document.body.offsetWidth; / / wide const height of the visible screen = document.body.offsetHeight; / / High const scale of the visible screen = window.devicePixelRadio / / the devicePixelRadio// of the device magnifies the Canvas canvas by scale times, and then puts 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.msImageSmoothingEnabled = false; context.imageSmoothingEnabled = false; / / canvas convert to image canvas2Image (canvas, canvas.width, canvas.height);})

2. Convert canvas2Image to picture

In general, it would be nice to convert to jpeg format.

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'); / / format return img;} can be changed as needed

3. Long press to save the picture

First to achieve a long press method, long press and then the resulting picture append to body, transparent floating 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 incoming method}, false); $this [I] .addEventListener ('touchend', () = > {clearTimeout (timeout); / / long press time is less than 800ms, and the incoming method}, false) is not executed;}} / / 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 incoming method}, false); $this [I] .addEventListener ('touchend', () = > {clearTimeout (timeout); / / long press time is less than 800ms, and the incoming method}, false);}}; $(' img'). LongPress () = > {saveImg ();}) SaveImg () {/ / the picture node const dom = document.querySelector ('img') you want to save; / / create a new canvas const Canvas = document.createElement (' canvas'); const width = document.body.offsetWidth; / / wide const height of the visible screen = document.body.offsetHeight; / / High const scale of the visible screen = window.devicePixelRatio / / devicePixelRatio of the device / / magnify the Canvas canvas by scale times, and then put 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 into picture 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 return img as needed } after reading this, the article "how to achieve the function of saving pictures by pressing the long button in HTML5 pages" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.