簡單的網頁截圖功能 – DOM to Image - Front-End

通过使用jQuery和 JavaScript，您可以很容易地截取一个div的屏幕截图。 您只需要引入jQuery库文件，并编写一个JavaScript函数来处理截屏逻辑。

本文将探讨几种使用JavaScript实现div内容截图并保存到本地的方法，涵盖从简单的CSS技巧到使用HTML5 Canvas API的进阶技术。 我们将一步步分析...

Create a <div> that has to be captured in the screenshot and give it an id so that it can be used later. Create a button inside <div> element and use an "onclick" handler for the button. The function to take the screenshot is defined

In this step-by-step guide, we’ll walk through creating a web page with drag-and-drop divs and adding functionality to screenshot that section, saving it as a JPG or PNG. We’ll use vanilla JavaScript for drag-and-drop and a beginner-friendly l

去年九月時，August 有寫了一篇〈簡單的網頁截圖功能 – html2canvas、Canvas2image〉，當時寫完後，以為這就是前端在網頁截圖這塊的終極套件（咦？）。結果最近工作上真的要使用這套截圖、下載的功能時，才發現真實的情形下，因為網頁會比 Demo 中的複雜，所以存下來的圖，圖片裡的網頁有些部份是跑版的！ 傻眼，還得另外調一版 CSS 給截圖狀態下的網頁，多耗了一點時間。 最近又有另一個案子要使用截圖並下載的功能，發現一樣會有跑版的情形，August 眉頭一皺，覺得案情並不單純，所以就問了

上面的程式碼先使用 html2canvas 套件將網頁的 DOM 元素轉換為 canvas (畫布)，然後再使用 canvas2image 套件將 canvas 內容轉換成圖片下載。

请注意，第二幅图像包含一个与"下载"按钮相邻的画布，我们只需右键单击并保存到本地存储即可。 我们需要捕获 (转换为图像)布局我们网站的标记部分，并保存捕获的图像或对其进行处理。 因此，我们需要设计一种方法来实现这种描述的行为。 由于我们的问题包括捕获任何标记元素而不仅仅是画布，因此有点复杂，尤其是如果我们打算从头开始做的话。 因此，为了方便起见，我们将使用第三方库htmltocanvas，它的作用正如其名称所暗示的那样，将所需的标记转换为画布，之后我们可以简单地将画布元素下载为图像。