Home > Article > Web Front-end > Example sharing of JavaScript implementing screenshot function
Example sharing of JavaScript implementing screenshot function
- 黄舟Original
- 2018-05-10 16:13:412419browse
I think the idea of using JS to take screenshots is very ridiculous. First of all, JS does not have the permission to call the screenshot function of the operating system. Secondly, the browser (BOM) does not provide a relevant screenshot interface. After some tossing, I got some ideas. The following is a brief introduction to the implementation code of the js screenshot function through example code. Let’s take a look.
Recently participated in the development of related pages of NetEase Hearthstone Box and was working on a card group sharing page (Address: Hearthstone Box Card group sharing), there is a requirement: users can share this card group with friends in the form of pictures. The original approach was to use the server to convert the page into an image, and then return the image address to the front end. Well, this is pretty good, and the server can also cache the converted images, and the next request can directly return the image address. There is nothing wrong with it in principle. However, a problem arises. The pictures converted in the background are occasionally inconsistent with the page content, and sometimes some content is missing. The PM sister is very unhappy and says that this problem must be solved. Anyway, the interface for converting pages into images is done in the background, it’s none of my business! Just when I was secretly happy, something tragic happened. A colleague in the background said that because some content in the page is loaded asynchronously (for example, the QR code at the bottom is generated through canvas), the server conversion is unstable. Sometimes Asynchronously rendered content cannot be intercepted. To put it bluntly, he has no way to solve this problem. Let’s change the front end. Who told the front end to use asynchronous rendering? Finally, the leader asked me to try if I could directly use JS to take screenshots, which would not only reduce the pressure on the server, but also solve the above bug.
At first, I thought the idea of using JS to take screenshots was very ridiculous (blame my ignorance, the front-end has developed too fast in recent years): firstly, JS does not have permission to call the screenshot function of the operating system, and secondly, The browser (BOM) also does not provide a relevant screenshot interface. What should I do? What should I do? If you have any questions, please contact Google. Then I searched for: JS html to png, and then I found this: render-html-to-an-image. I'm starting to get some ideas. Someone in the answer mentioned that you can convert DOM into canvas, huh! It’s Canvas again! I couldn't help but get excited. It was really difficult to find a way out of the mountains and rivers, but there was still a bright future in another village! Then I searched for dom to canvas and came to the well-known mdn document Drawing_DOM_objects_into_a_canvas. Then I started to read the document seriously. As mentioned at the beginning of the document, you cannot convert DOM into canvas, but you can convert DOM into SVG, and then draw the SVG into the canvas. Some people may ask, why do we need to convert dom to svg first? This may be because SVG uses XML representation and the structure is consistent with DOM.
The following is the step by step tutorial from the official document:
1. The media type of the Blob must be "image/svg+xml"
2.Required An svg element
3. Insert a foreignObject element
inside the svg element. 4. Put the html
that conforms to the specification into the foreignObject element. Converting dom to canvas is as simple as the above steps. The following is a simple demo given in the document:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<p xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</p>' +
'</foreignObject>' +
'</svg>';
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;
</script>
</body>
</html>Copy the code and run it. Wow, it’s so cool. Two lines of cool word art appear on the browser!
Well, it turns out that converting dom to canvas is so easy? Then I use document.body.innerHTML to take out all the DOM in the body and put it in the foreignObject element. Isn’t it OK and the entire page is intercepted?
The demo is just a Hello World, but the Dom structure in the actual project is much more complicated than this. For example, external style sheets, pictures, and some tags may not comply with the xml specification (such as Missing closing tag, etc.). Here is a simple example. .container does not use inline styles, but is defined in the style tag. The font is red. After it is converted into an image, the style does not take effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container {
color: red;
}
</style>
</head>
<body>
<p class="container" >
Hello World!
</p>
<canvas id="canvas" style="border:2px solid black;" width=200" height="200">
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<p xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
document.querySelector('.container').innerHTML +
'</p>' +
'</foreignObject>' +
'</svg>';
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;
</script>
</body>
</html>Since external styles do not take effect, we can traverse all DOM elements through JS and add all styles to inline styles through the element.style object. This idea sounds good, but I really can't write the function that converts external styles into inline styles. The demand is tight, and I don't have much time to mess around, so I want to look for any ready-made libraries. So I went to Google again. Fortunately, I found a library called html2canvas at once. It is a great library, very powerful, but very simple to use. With such a simple method, I can take a screenshot of my entire page:
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
document.body.appendChild(canvas);
}).catch(function(e) {
console.error('error', e);
});
}Currently there is another problem, that is, this method intercepts the entire page by default (that is, it will use your innerHeight and innerWidth as boundaries, and there will be a lot of white space). However, my deck only occupies A small part of the page, I only want the deck part. In fact, it is easier to handle if we already have the canvas, we can process it. The general idea is: 1. Convert the canvas object obtained above into a Blob and put it into an img element. Then draw img.src into the canvas. At this time, calling the canvas.drawImage method can intercept the content we want. The following two functions convert canvas to image and vice versa.
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png", 0.1);
return image;
}
// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(image, startX, startY, width, height, 0, 0, width, height);
return canvas;
}然后，再把我们上面的写的 convertHtml2Canvas 改成下面的：
function convertHtml2Canvas() {
html2canvas(document.body, {
allowTaint: false,
taintTest: true
}).then(function(canvas) {
var img = convertCanvasToImage(canvas);
document.body.appendChild(img);
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 0, 0, 384, 696);
img.src = convertCanvasToImage(canvas).src;
$(img).css({
display: 'block',
position: 'absolute',
top: 0,
left: 400 + 'px'
});
}
}).catch(function(e) {
console.error('error', e);
});
}这时候就可以把它的页面的某部分内容进行截取下来了。效果如卡组分享测试页面。页面左边部分是DOM结构的，右边部分是则是使用html2canvas转换出来的图片。长得一模一样，毫无毛病哈。
关于JS页面截图的就写到这里啦，因为也只刚刚接触，很多东西也理解得不到位，欢迎各大神指点。后面会深入学习一下html2canvas的源码，进一步理解dom to canvas的原理。
The above is the detailed content of Example sharing of JavaScript implementing screenshot function. For more information, please follow other related articles on the PHP Chinese website!