JS screenshot and bypass server image saved to local (Html2canvas)

What we're going to share today is to use Html2canvas to build on your needs., and Fix Html2canvasBlur, and bypass server picturesSave to local。

Just a few lines of code can be handy depending on the DOM you want, but the resulting image is blurry

Directly select the DOM you want, but because of the canvas, the resulting image is blurred Html2canvas (document.queryselector (' div ')). Then (function (canvas) {            Document.body.appendChild (canvas);        })

　　

A common solution is to create a multiple-fold canvas and place it in a smaller container, which solves the embarrassment of a screenshot blur .

Another problem is how to save the image Bypass server to the local , Canvas has a todataurl method, and then a tag has a download attribute, feel almost heaven-made and. Of course, in the blocking download , you can use a built-in rule in the WebView, as long as the A tag ( without the href attribute ) inside the nested img , you can normally call out to save to the phone and share to friends menu bar.

The following is a simple demo

<! DOCTYPE html>
　　
JS and bypass server image save to local (Html2canvas)