This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge.

preface

About the SSD series: Some interesting content on the front end, aimed at 3-10 minutes, 500-1000 words, gain without being tired.

Windows has built-in shortcut commands and software, Chrome developer tools can also take screenshots with one click, html2Canvas and headless browser can be implemented, which one do you need?

For mobile reading, make an outline:

  • Windows built-in
    • Screenshot of Windows built-in shortcut keys
    • Screenshots of Windows built-in software
  • Windows Third-party program
    • Chat Office
    • Other software
  • chrome
    • Chrome Developer Tools
    • Chrome plug-ins
  • The code inside the page generates screenshots
    • Html2canvas based on Canvas
    • Dom-to-image and Rasterizehtml.js based on SVG
  • Headless browser such as Puppeteer

Windows comes with

1.1 Windows Built-in Shortcut Keys

Many people may be used to wechat, QQ, nail fast screenshots, as everyone knows, the system has come with.

  1. Ctrl+ Shift +X to select the screenshot range.

  2. Ctrl + PrScrn to capture full screen

  3. Alt + PrScrn capture full screen

1.2 Built-in Windows Software

Winodws10 actually comes with screenshots tool, you search screenshots

Or CMD input snippingTool. exe, you can take a screenshot, experience than wechat check some, but a backup plan.

Windows Third-party program

2.1 Chat office tools

Wechat, QQ, nail nail and so on all come with screenshots.

2.2 Other Tools

There are many, I recommend the Snipaste, you can capture multiple screenshots, put them on the desktop, with Tianro OCR image to text, it is perfect. Others posted the picture code, minutes into text, direct use.

chrome

3.1 Chrome Developer Tools

CTR + shift + I invokes the developer tool, then CTR + shift + p invokes chrome’s command program.

Four:

  1. Capture Area Screenshot Select a part of the page for screenshot.

  2. The page is full screen, including the parts outside the visual area.

  3. Capture node screenshot To Capture the content of a node, select a node from the Elements Tab first. When you select the body or HTML node, it’s kind of Capture full size screenshot

  4. Capture the visible part of the page.

3.2 the chrome plug-ins

Awesome Screenshot, Full Page Screen Capture, Webpage Screenshot and so on are good Webpage Screenshot plug-ins.

For more, go to The Google Marketplace, and for that, I recommend freefq, a free, open source app. Chrome-go and The Valley Valley Access Assistant plugin are also worth a try.

Browser-based API

Its basic implementation principles, one is based on SVG, one is based on Canvas.

4.1 Canvas basedhtml2canvas

This library, probably everyone knows. It is to draw the element node to the canvas and then generate a screenshot, but cannot render iframe, Flash, etc.

It’s written based on Promise, and if you have a lower browser version, just find your own shim, and it’s extremely easy to use.

Here’s the code:

   <h1>The cloud of the world</h1>
    <div>Watch what, and like it when you're done</div>
    <img crossorigin="anonymous"
        src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/f1a9f122e925aeef5e4534ff7f706729~300x300.image" />
    <div>
        <button onclick="onSnapshot()">Why the screenshot</button>
    </div>
    <hr>Function onSnapshot() {html2Canvas (document.body, {useCORS: true, // null, } ).then(function (canvas) { document.body.appendChild(canvas); }); }Copy the code

Effect demonstration:

There are also many pitfalls, the most common is the image loss, the solution is to set the image crossorigin=”anonymous” and set the HTML2Canvas option useCORS.

See HTML2Canvas Issues for more information

4.2 SVG baseddom-to-image 和 rasterizeHTML.js

The idea is that SVG’s foreignObject tag can wrap arbitrary HTML content.

Both libraries have not been maintained or updated for several years, but the idea is worth learning.

Headless browser

Puppeteer, PhantomJS, SlimerJS and other headless browsers, also have the ability to screenshot, Puppeteer is a rising star, very optimistic.

The puppeteer screenshot code is also fairly simple:

const puppeteer = require('puppeteer');

(async() = > {const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  awaitbrowser.close(); }) ();Copy the code

other

6.1 Convert the PDF file to a PDF file and then export the PDF file to a picture file

Web pages can be printed directly to PDF, but there are also many programs that can convert web pages to PDF. Such as wkhtmltopdf. Like python’s PDfKit.

Wkhtmltopdf can also directly generate images, very powerful.

6.1 Sogou browser, 360 and other domestic browsers

Menu has function options, save as pictureCopy the code

Write in the last

Writing is not easy, your praise and comments are the biggest motivation for me to move forward.

Html2canvas step on the road to the pit JavaScript to achieve the screen capture method summary