這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
一、故事的開始
最近產品又開始整活了，本來是毫無壓力的一周，可以小摸一下魚的，但是突然有一天跟我說要做一個在網頁端截屏的功能。
作為一個工作多年的前端，早已學會了盡可能避開麻煩的需求，只做增刪改查就行！
我立馬開始了我的反駁，我的理由是市面上截屏的工具有很多的，微信截圖、Snipaste都可以做到的，自己實現(xiàn)的話，一是比較麻煩，而是性能也不會很好，沒有必要，把更多的時間放在核心業(yè)務更合理！
結果產品跟我說因為公司內部有個可以用來解析圖片，生成文本OCR的算法模型，web端需要支持截取網頁中部分然后交給模型去訓練，微信以及其他的截圖工具雖然可以截圖，但需要先保存到本地，再上傳給模型才行。
網頁端支持截圖后可以在在截屏的同時直接上傳給模型，減少中間過程，提升業(yè)務效率。
我一聽這產品小嘴巴巴的說的還挺有道理，沒有辦法，只能接了這個需求，從此命運的齒輪開始轉動，開始了我漫長而又曲折的思考。
二、我的思考
在實現(xiàn)任何需求的時候，我都會在自己的腦子中大概思考一下，評估一下它的難度如何。我發(fā)現(xiàn)web端常見的需求是在一張圖片上截圖，這個還是比較容易的，只需要準備一個canvas，然后利用canvas的方法 drawImage就可以截取這個圖片的某個部分了。
示例如下：
<!DOCTYPE html>
<html>
<head>
<title>截取圖片部分示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<br>
<button onclick="cropImage()">截取圖片部分</button>
<br>
<img id="croppedImage" alt="截取的圖片部分">
<br>
<script>
function cropImage() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function () {
// 在canvas上繪制整張圖片
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// 截取圖片的一部分，這里示例截取左上角的100x100像素區(qū)域
var startX = 0;
var startY = 0;
var width = 100;
var height = 100;
var croppedData = ctx.getImageData(startX, startY, width, height);
// 創(chuàng)建一個新的canvas用于顯示截取的部分
var croppedCanvas = document.createElement('canvas');
croppedCanvas.width = width;
croppedCanvas.height = height;
var croppedCtx = croppedCanvas.getContext('2d');
croppedCtx.putImageData(croppedData, 0, 0);
// 將截取的部分顯示在頁面上
var croppedImage = document.getElementById('croppedImage');
croppedImage.src = croppedCanvas.toDataURL();
};
// 設置要加載的圖片
image.src = 'your_image.jpg'; // 替換成你要截取的圖片的路徑
}
</script>
</body>
</html>
一、獲取像素的思路
但是目前的這個需求遠不止這樣簡單，因為它的對象是整個document，需要在整個document上截取一部分，我思考了一下，其實假設如果瀏覽器為我們提供了一個api，能夠獲取到某個位置的像素信息就好了，這樣我將選定的某個區(qū)域的每個像素信息獲取到，然后在一個像素一個像素繪制到canvas上就好了。
我本以為我發(fā)現(xiàn)了一個很好的方法，可遺憾的是經過調研瀏覽器并沒有為我們提供類似獲取某個位置像素信息的API。
唯一為我們提供獲取像素信息的是canvas的這個API。
<!DOCTYPE html>
<html>
<head>
<title>獲取特定像素信息示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<br>
<button onclick="getPixelInfo()">獲取特定像素信息</button>
<br>
<div id="pixelInfo"></div>
<script>
function getPixelInfo() {
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 繪制一些內容到canvas
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
// 獲取特定位置的像素信息
var x = 75; // 替換為你想要獲取的像素的x坐標
var y = 75; // 替換為你想要獲取的像素的y坐標
var pixelData = ctx.getImageData(x, y, 1, 1).data;
// 提取像素的顏色信息
var red = pixelData[0];
var green = pixelData[1];
var blue = pixelData[2];
var alpha = pixelData[3];
// 將信息顯示在頁面上
var pixelInfo = document.getElementById('pixelInfo');
pixelInfo.innerHTML = '在位置 (' + x + ', ' + y + ') 的像素信息：<br>';
pixelInfo.innerHTML += '紅色 (R): ' + red + '<br>';
pixelInfo.innerHTML += '綠色 (G): ' + green + '<br>';
pixelInfo.innerHTML += '藍色 (B): ' + blue + '<br>';
pixelInfo.innerHTML += 'Alpha (透明度): ' + alpha + '<br>';
}
</script>
</body>
</html>
瀏覽器之所以沒有為我們提供相應的API獲取像素信息，停下來想想也是有道理的，甚至是必要的，因為假設瀏覽器為我們提供了這個API，那么惡意程序就可以通過這個API，不斷的獲取你的瀏覽器頁面像素信息，然后全部繪制出來。一旦你的瀏覽器運行這個段惡意程序，那么你在瀏覽器干的什么，它會一覽無余，相當于在網絡的世界里裸奔，毫無隱私可言。
二、把DOM圖片化
既然不能走捷徑直接拿取像素信息，那就得老老實實的把document轉換為圖片，然后調用canvas的drawImage這個方法來截取圖片了。
在前端領域其實99%的業(yè)務場景早已被之前的大佬們都實現(xiàn)過了，相應的輪子也很多。我問了一下chatGPT，它立馬給我推薦了大名鼎鼎的html2canvas，這個庫能夠很好的將任意的dom轉化為canvas。這個是它的官網。
我會心一笑，因為這不就直接能夠實現(xiàn)需求了，很容易就可以寫出下面的代碼了：
html2canvas(document.body).then(function(canvas) {
// 將 Canvas 轉換為圖片數據URL
var src = canvas.toDataURL("image/png");
var image = new Image();
image.src = src;
image.onload = ()=>{
const canvas = document.createElement("canvas")
const ctx = canvas.getContext("2d");
const width = 100;
const height = 100;
canvas.width = width;
canvas.height = height;
// 截取以（10,10）為頂點，長為100，寬為100的區(qū)域
ctx.drawImage(image, 10, 10, width, height , 0 , 0 ,width , height);
}
});
上面這段代碼就可以實現(xiàn)截取document的特定的某個區(qū)域，需求已經實現(xiàn)了，但是我看了一下這個html2canvas庫的資源發(fā)現(xiàn)并沒有那么簡單，有兩個點并不滿足我希望實現(xiàn)的點：
1.大小
當我們將html2canvas引入我們的項目的時候，即便壓縮過后，它的資源也有近200kb：
要知道整個react和react-dom的包壓縮過后也才不到150kb，因此在項目只為了一個單一的功能引入一個復雜的資源可能并不劃算，引入一個復雜度高的包一個是它會增加構建的時間，另一方面也會增加打包之后的體積。
如果是普通的web工程可能情有可原，但是因為我會將這需求做到插件當中，插件和普通的web不一樣的一點，就是web工程如果更新之后，客戶端是自動更新的。但是插件如果更新了，需要客戶端手動的下載插件包，然后再在瀏覽器安裝，因此包的大小盡可能小才好，如果一個插件好幾十MB的話，那客戶端肯定煩死了。
2.性能
作為業(yè)內知名的html2canvas庫，性能方面表現(xiàn)如何呢？
我們可以看看它的原理，一個dom結構是如何變成一個canvas的呢！
它的源碼在這里：核心的實現(xiàn)是canvas-renderer.ts這個文件。
當html2canvas拿到dom結構之后，首先為了避免副作用給原dom造成了影響，它會克隆一份全新的dom，然后遍歷DOM的每一個節(jié)點，將其扁平化，這個過程中會收集每個節(jié)點的樣式信息，尤其是在界面上的布局的幾何信息，存入一個棧中。
然后再遍歷棧中的每一個節(jié)點進行繪制，根據之前收集的樣式信息進行繪制，就這樣一點點的繪制到提前準備的和傳入dom同樣大小的canvas當中，由于針對很多特殊的元素，都需要處理它的繪制邏輯，比如iframe、input、img、svg等等。所以整個代碼就比較多，自然大小就比較大了。
整個過程其實需要至少3次對整個dom樹的遍歷才可以繪制出來一個canvas的實例。
這個就是這個繪制類的主要實現(xiàn)方法：
可以看到，它需要考慮的因素確實特別多，類似寫這個瀏覽器的繪制引擎一樣，特別復雜。
要想解決以上的大小的瓶頸。
第一個方案就是可以將這個資源動態(tài)加載，但是一旦動態(tài)加載就不能夠在離線的環(huán)境下使用，在產品層面是不能接受的，因為大家可以想一想如果微信截圖的功能在沒有網絡的時候就使用不了，這個肯定不正常，一般具備工具屬性的功能應該盡可能可以做到離線使用，這樣才好。
因此相關的代碼資源不能夠動態(tài)加載。
dom-to-image
正當我不知道如何解決的時候，我發(fā)現(xiàn)另外了一個庫dom-to-image，我發(fā)現(xiàn)它打包后的大小只有10kb左右，這其實已經一個很可以接受的體積了。這個是它的github主頁。好奇的我想知道它是怎么做到只有這么小的體積就能夠實現(xiàn)和html2canvas幾乎同樣的功能的呢？于是我就研究了一下它的實現(xiàn)。
dom-to-image的實現(xiàn)利用了一個非常靈活的特性--image可以渲染svg。
我們可以復習一下img標簽的src可以接受什么樣的類型：這里是mdn的說明文檔：
可以接受的格式要求是：
- APNG（動態(tài)可移植網絡圖形）——無損動畫序列的不錯選擇（GIF 性能較差）。
- AVIF（AV1 圖像文件格式）——靜態(tài)圖像或動畫的不錯選擇，其性能較好。
- GIF（圖像互換格式）——簡單圖像和動畫的不錯選擇。
- JPEG（聯(lián)合圖像專家組）——有損壓縮靜態(tài)圖像的不錯選擇（目前最流行的格式）。
- PNG（便攜式網絡圖形）——對于無損壓縮靜態(tài)圖像而言是不錯的選擇（質量略好于 JPEG）。
- SVG（可縮放矢量圖形）——矢量圖像格式。用于必須以不同尺寸準確描繪的圖像。
- WebP（網絡圖片格式）——圖像和動畫的絕佳選擇。
如果我們使用svg格式來渲染圖片就可以是這樣的方式：
<!DOCTYPE html>
<html>
<head>
<title>渲染SVG</title>
</head>
<body>
<h1>SVG示例</h1>
<img src="example.svg" alt="SVG示例">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>渲染SVG字符串</title>
</head>
<body>
<div id="svg-container">
<!-- 這里是將SVG內容渲染到<img>標簽中 -->
<img id="svg-image" src="data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' /></svg>" alt="SVG圖像">
</div>
</body>
</html>
把svg的標簽序列化之后直接放在src屬性上，image也是可以成功解析的，只不過我們需要添加一個頭部：data:image/svg+xml, 。
令人興奮的是，svg并不是只支持svg語法，也支持將其他的xml類型的語法比如html嵌入在其中。antv的x6組件中有非常多這樣的應用例子，我給大家截圖看一下：
?在svg中可以通過foreignObject這個標簽來嵌套一些其他的xml語法，比如html等，有了這一特性，我們就可以把上面的例子改造一下：
<!DOCTYPE html>
<html>
<head>
<title>渲染SVG字符串</title>
</head>
<body>
<div id="svg-container">
<!-- 這里是將SVG內容渲染到<img>標簽中 -->
<img
id="svg-image"
src="data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='2' fill='red' /><foreignObject>{ 中間可以放 dom序列化后的結果呀 }</foreignObject></svg>"
alt="SVG圖像"
>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>渲染SVG字符串</title>
</head>
<body>
<div id="render" style="width: 100px; height: 100px; background: red"></div>
<br />
<div id="svg-container">
<!-- 這里是將SVG內容渲染到<img>標簽中 -->
<img id="svg-image" alt="SVG圖像" />
</div>
<script>
const perfix =
"data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><foreignObject x='0' y='0' width='100%' height='100%'>";
const surfix = "</foreignObject></svg>";
const render = document.getElementById("render");
render.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
const string = new XMLSerializer()
.serializeToString(render)
.replace(/#/g, "%23")
.replace(/\n/g, "%0A");
const image = document.getElementById("svg-image");
const src = perfix + string + surfix;
console.log(src);
image.src = src;
</script>
</body>
</html>
如果你將這個字符串直接通過瀏覽器打開，也是可以的，說明瀏覽器可以直接識別這種形式的媒體資源正確解析對應的資源：
data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><foreignObject x='0' y='0' width='100%' height='100%'><div id="render" style="width: 100px; height: 100px; background: red" xmlns="http://www.w3.org/1999/xhtml"></div></foreignObject></svg>
實不相瞞這個就是dom-to-image的核心原理，性能肯定是不錯的，因為它是調用瀏覽器底層的渲染器。
通過這個dom-to-image我們可以很好的解決資源大小和性能這兩個瓶頸的點。
三、優(yōu)化
這個庫打包后的產物是umd規(guī)范的，并且是統(tǒng)一暴露出來的全局變量，因此不支持treeshaking。
但是很多方法比如toJpeg、toBlob、等方法我們其實都用不到，所以打包了很多我們不需要的產物，于是其實我們可以把核心的實現(xiàn)自己寫一遍，使用1-2kb的空間就可以做到這一點。
經過以上的思考我們就可以基本上確定方案了：
基于dom-to-image的原理，實現(xiàn)一個簡易的my-dom-to-image，大約只需要100行代碼左右就可以做到。
然后將document.body轉化為image，再從這個image中截取特定的部分。
好了，以上就是我關于這個需求的一些思考，如果掘友也有一些其他非常有意思的需求，歡迎評論區(qū)討論我們一起頭腦風暴?。。?！
利用插件
其實針對截屏，如果只用純web技術，確實有點麻煩，但是如果說我們利用插件去做就非常簡單了，我們只需要借助一個API就可以獲取一個tab的截屏數據。
chrome.tabs.captureVisibleTab(
windowId,
{ format: 'png' }
, function(dataUrl) {
const img = new Image();
img.src = dataUrl; // 將圖像添加到頁面或進行其他操作
document.body.appendChild(img);
});
所以說如果你有精力，可以和你的產品商量一下能不能把這個需求做到一個插件里面，你可以開發(fā)一個插件去做這件事情。不必擔心不懂插件相關的技術，因為我已經幫你寫了一個插件專欄，點擊這里查看。里面有插件開發(fā)入門的大部分內容，快來看看吧！
四、維護 -- 這個內容非重點，可以跳過
9.13日更
文章發(fā)布后，針對這個需求有很多掘友提出了新的想法和思路，給思考的掘友們點贊(??????)??，我大概整理一下評論區(qū)的方案：
有一位掘友提到了一個庫 rasterizeHTML.js。
?從名字來看是想要柵格化HTML，通俗來講把HTML畫出來的意思，我以前還真不知道還有這個庫，學習了，他的核心源碼就是下面這一段：
說白了，還是一樣，利用svg可以包含html的特點去做的，和dom-to-image的思想差不多。
另外一位掘友提到了一個API：navigator.mediaDevices.getDisplayMedia，我大概試了一下，應該是不滿足需求的，因為這個API的調用必須需要用戶手動賦予許可才可以，你一調用它，就會彈出賦予權限的提示框，就像下面這樣：
即便用戶同意了，可以得到一個MediaStream被稱為媒體流的對象，但是這個對象內部肯定封裝了屏幕的像素信息，但是壓根沒把這個東西暴露給用戶，反正我找遍了它的幾乎所有屬性，沒看到它把像素信息暴露出來了。它是方便用戶直接在video上使用而設計的?？梢杂盟鼇碜鲱愃破聊还蚕淼墓δ?。
但是既然已經將像素繪制到了video上實際上就可以將其轉化為canvas，我們可以像下面這樣的方式去做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>共享屏幕</title>
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
animation-name: slideIn;
animation-duration: 2s; /* 動畫持續(xù)時間 */
animation-timing-function: ease; /* 動畫時間函數 */
animation-fill-mode: forwards; /* 動畫結束后保持最終狀態(tài) */
animation-iteration-count: infinite;
}
/* 定義動畫關鍵幀 */
@keyframes slideIn {
0% {
left: 100px; /* 起始位置 -100px 左側 */
}
50% {
left: 0; /* 結束位置 0 左側 */
}
100% {
left: 100px;
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
<button onclick="share()">share</button>
<video src="" id="video" width="640" height="360" controls></video>
<canvas id="canvasElement" width="640" height="360"></canvas>
<script>
let tracks;
function share() {
try {
navigator.mediaDevices
.getDisplayMedia({ video: true })
.then((mediaStream) => {
const videoElement = document.getElementById("video");
const canvasElement = document.getElementById("canvasElement");
videoElement.srcObject = mediaStream;
const ctx = canvasElement.getContext("2d");
// 在每個AnimationFrame繪制視頻幀
function drawFrame() {
ctx.drawImage(
videoElement,
0,
0,
canvasElement.width,
canvasElement.height
);
const imageData = ctx.getImageData(
0,
0,
canvasElement.width,
canvasElement.height
);
// 在 imageData 中獲取像素信息
// imageData.data 包含了每個像素的RGBA數據
// 您可以處理這些數據以獲取所需的信息
// 例如，獲取特定坐標的像素顏色值：imageData.data[(y * imageData.width + x) * 4]
console.log(imageData);
requestAnimationFrame(drawFrame);
}
// 啟動繪制循環(huán)
requestAnimationFrame(drawFrame);
});
} catch (e) {
console.log("Unable to acquire screen capture: " + e);
}
}
</script>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-746224.html
本文轉載于:
https://juejin.cn/post/7276694924137463842
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-746224.html
到了這里，關于記錄--產品：請給我實現(xiàn)一個在web端截屏的功能！的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
