Shulou(Shulou.com)06/01 Report--

This article is about how html5 solves the problem of long pressing to save pictures on a web page. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

{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

{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 as needed return img;} thank you for reading! This is the end of the article on "how to solve the problem of html5 long pressing to save pictures on the web page". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.