Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use JavaScript to realize screenshot function". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "how to use JavaScript to realize screenshot function" together!

1. Blob media type must be "image/svg+xml"

2. Need an svg element

3. Insert a foreignObject element inside the svg element

4. Put the html that conforms to the specification inside the foreignObject element

Converting dom to canvas is as simple as that, just a few steps above. Here is a simple demo from the documentation:

Document var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = '' + '' + '' + 'I like ' + '' + 'cheese' + '' + '' + ''; var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svg = new Blob([data], {type: 'image/svg+xml'}); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); } img.src = url;

Copy the code, run it, wow, cool, two lines of art appeared on the browser!

Hmm, so it's so easy to convert dom into canvas? Then I take out all the doms in the body through document.body[xss_clean] and put them in the foreignObject element. Isn't that OK and intercept the whole page?

The demo is just a Hello World, but the Dom structure in the actual project is much more complex than this, for example, introducing external stylesheets, images, and possibly some tags that do not conform to the xml specification (e.g. missing closing tags, etc.). For a simple example,.container is not defined in the style tag, but in the style tag. The font is red, and the style does not take effect after it is converted to an image.

Document .container { color: red; } Hello World!

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.