記錄--產品：請給我實現一個在web端截屏的功能！

来源:https://www.cnblogs.com/smileZAZ/archive/2023/11/15/17834578.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、故事的開始 最近產品又開始整活了，本來是毫無壓力的一周，可以小摸一下魚的，但是突然有一天跟我說要做一個在網頁端截屏的功能。 作為一個工作多年的前端，早已學會了儘可能避開麻煩的需求，只做增刪改查就行！ 我立馬開始了我的反駁，我的理由是市 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

一、故事的開始

最近產品又開始整活了，本來是毫無壓力的一周，可以小摸一下魚的，但是突然有一天跟我說要做一個在網頁端截屏的功能。

作為一個工作多年的前端，早已學會了儘可能避開麻煩的需求，只做增刪改查就行！

我立馬開始了我的反駁，我的理由是市面上截屏的工具有很多的，微信截圖、Snipaste都可以做到的，自己實現的話，一是比較麻煩，而是性能也不會很好，沒有必要，把更多的時間放在核心業務更合理！

結果產品跟我說因為公司內部有個可以用來解析圖片，生成文本OCR的演算法模型，web端需要支持截取網頁中部分然後交給模型去訓練，微信以及其他的截圖工具雖然可以截圖，但需要先保存到本地，再上傳給模型才行。

網頁端支持截圖後可以在在截屏的同時直接上傳給模型，減少中間過程，提升業務效率。

我一聽這產品小嘴巴巴的說的還挺有道理，沒有辦法，只能接了這個需求，從此命運的齒輪開始轉動，開始了我漫長而又曲折的思考。

二、我的思考

在實現任何需求的時候，我都會在自己的腦子中大概思考一下，評估一下它的難度如何。我發現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像素區域
                var startX = 0;
                var startY = 0;
                var width = 100;
                var height = 100;
                var croppedData = ctx.getImageData(startX, startY, width, height);

                // 創建一個新的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，能夠獲取到某個位置的像素信息就好了，這樣我將選定的某個區域的每個像素信息獲取到，然後在一個像素一個像素繪製到canvas上就好了。

我本以為我發現了一個很好的方法，可遺憾的是經過調研瀏覽器並沒有為我們提供類似獲取某個位置像素信息的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%的業務場景早已被之前的大佬們都實現過了，相應的輪子也很多。我問了一下chatGPT，它立馬給我推薦了大名鼎鼎的html2canvas，這個庫能夠很好的將任意的dom轉化為canvas。這個是它的官網。

我會心一笑，因為這不就直接能夠實現需求了，很容易就可以寫出下麵的代碼了：

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的區域
       ctx.drawImage(image, 10, 10, width, height , 0 , 0 ,width , height);
    }
});

上面這段代碼就可以實現截取document的特定的某個區域，需求已經實現了，但是我看了一下這個html2canvas庫的資源發現並沒有那麼簡單，有兩個點並不滿足我希望實現的點：

1.大小

當我們將html2canvas引入我們的項目的時候，即便壓縮過後，它的資源也有近200kb：

要知道整個react和react-dom的包壓縮過後也才不到150kb，因此在項目只為了一個單一的功能引入一個複雜的資源可能並不划算，引入一個複雜度高的包一個是它會增加構建的時間，另一方面也會增加打包之後的體積。

如果是普通的web工程可能情有可原，但是因為我會將這需求做到插件當中，插件和普通的web不一樣的一點，就是web工程如果更新之後，客戶端是自動更新的。但是插件如果更新了，需要客戶端手動的下載插件包，然後再在瀏覽器安裝，因此包的大小儘可能小才好，如果一個插件好幾十MB的話，那客戶端肯定煩死了。

2.性能

作為業內知名的html2canvas庫，性能方面表現如何呢？

我們可以看看它的原理，一個dom結構是如何變成一個canvas的呢！

它的源碼在這裡：核心的實現是canvas-renderer.ts這個文件。

當html2canvas拿到dom結構之後，首先為了避免副作用給原dom造成了影響，它會克隆一份全新的dom，然後遍歷DOM的每一個節點，將其扁平化，這個過程中會收集每個節點的樣式信息，尤其是在界面上的佈局的幾何信息，存入一個棧中。

然後再遍歷棧中的每一個節點進行繪製，根據之前收集的樣式信息進行繪製，就這樣一點點的繪製到提前準備的和傳入dom同樣大小的canvas當中，由於針對很多特殊的元素，都需要處理它的繪製邏輯，比如iframe、input、img、svg等等。所以整個代碼就比較多，自然大小就比較大了。

整個過程其實需要至少3次對整個dom樹的遍歷才可以繪製出來一個canvas的實例。

這個就是這個繪製類的主要實現方法：

可以看到，它需要考慮的因素確實特別多，類似寫這個瀏覽器的繪製引擎一樣，特別複雜。

要想解決以上的大小的瓶頸。

第一個方案就是可以將這個資源動態載入，但是一旦動態載入就不能夠在離線的環境下使用，在產品層面是不能接受的，因為大家可以想一想如果微信截圖的功能在沒有網路的時候就使用不了，這個肯定不正常，一般具備工具屬性的功能應該儘可能可以做到離線使用，這樣才好。

因此相關的代碼資源不能夠動態載入。

dom-to-image

正當我不知道如何解決的時候，我發現另外了一個庫dom-to-image，我發現它打包後的大小隻有10kb左右，這其實已經一個很可以接受的體積了。這個是它的github主頁。好奇的我想知道它是怎麼做到只有這麼小的體積就能夠實現和html2canvas幾乎同樣的功能的呢？於是我就研究了一下它的實現。

dom-to-image的實現利用了一個非常靈活的特性--image可以渲染svg。

我們可以複習一下img標簽的src可以接受什麼樣的類型：這裡是mdn的說明文檔：

可以接受的格式要求是：

如果我們使用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>
所以我們可以將dom序列化後的結構插到svg中，這不就天然的形成了一種dom->image的效果麽？下麵是演示的效果：
<!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我們可以很好的解決資源大小和性能這兩個瓶頸的點。

三、優化

這個庫打包後的產物是umd規範的，並且是統一暴露出來的全局變數，因此不支持treeshaking。

但是很多方法比如toJpeg、toBlob、等方法我們其實都用不到，所以打包了很多我們不需要的產物，於是其實我們可以把核心的實現自己寫一遍，使用1-2kb的空間就可以做到這一點。

經過以上的思考我們就可以基本上確定方案了：

基於dom-to-image的原理，實現一個簡易的my-dom-to-image，大約只需要100行代碼左右就可以做到。

然後將document.body轉化為image，再從這個image中截取特定的部分。

好了，以上就是我關於這個需求的一些思考，如果掘友也有一些其他非常有意思的需求，歡迎評論區討論我們一起頭腦風暴啊！！！

利用插件

其實針對截屏，如果只用純web技術，確實有點麻煩，但是如果說我們利用插件去做就非常簡單了，我們只需要藉助一個API就可以獲取一個tab的截屏數據。

chrome.tabs.captureVisibleTab(
  windowId, 
  { format: 'png' }
, function(dataUrl) { 
  const img = new Image(); 
  img.src = dataUrl; // 將圖像添加到頁面或進行其他操作  
  document.body.appendChild(img);
});

所以說如果你有精力，可以和你的產品商量一下能不能把這個需求做到一個插件裡面，你可以開發一個插件去做這件事情。不必擔心不懂插件相關的技術，因為我已經幫你寫了一個插件專欄，點擊這裡查看。裡面有插件開發入門的大部分內容，快來看看吧！

四、維護 -- 這個內容非重點，可以跳過

9.13日更

文章發佈後，針對這個需求有很多掘友提出了新的想法和思路，給思考的掘友們點贊(๑•̀ㅂ•́)و✧，我大概整理一下評論區的方案：

有一位掘友提到了一個庫 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; /* 動畫持續時間 */
        animation-timing-function: ease; /* 動畫時間函數 */
        animation-fill-mode: forwards; /* 動畫結束後保持最終狀態 */
        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);
              }

              // 啟動繪製迴圈
              requestAnimationFrame(drawFrame);
            });
        } catch (e) {
          console.log("Unable to acquire screen capture: " + e);
        }
      }
    </script>
  </body>
</html>
演示效果：

本文轉載於:

https://juejin.cn/post/7276694924137463842

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 記一次 .NET 某券商論壇系統 卡死分析
    一：背景 1. 講故事 前幾個月有位朋友找到我，說他們的的web程式沒有響應了，而且監控發現線程數特別高，記憶體也特別大，讓我幫忙看一下怎麼回事，現在回過頭來幾經波折，回味價值太濃了。 二：程式到底經歷了什麼 1. 線上程上找原因 這個程式記憶體高，線程高，無響應，尼瑪是一個複合態問題，那怎麼入手呢？按 ...
  • Unity播放Hap格式視頻 (大分辨下流暢播放以及幀同步解決方案)
    前言: 之前對於項目上播放大解析度視頻(特別是大於4k解析度的)常常會感覺相當的頭疼,最開始使用的是Unity自帶的VideoPlayer,發現效果並不理想,更換為AVPro後發現播放是流暢了 但不能操作視頻快進,只要一快進就會出現卡頓,最後偶然間發現了一款用於播放Hap格式視頻的插件才最終解決了這 ...
  • Net 高級調試之八：代碼審查及雜項命令
    1.HighLightingSystem 用於3D物體高亮顯示 在項目中的使用：導入插件後在需要高亮顯示的3d物體上附加Highlighter組件，在需要顯示高亮效果的攝像機上附加Highlighting Renderer組件。在代碼中調整Highlighter屬性即可控制物體高亮效果的開關、閃爍。 ...
  • MySQL Shell連接資料庫報MySQL Error 1045 (28000)錯誤淺析
    這裡簡單總結一下mysql shell訪問資料庫時報MySQL Error 1045 (28000): Access denied for user 'root'@'::1' (using password: YES)的原因以及如何解決這個問題 這裡測試的環境為MySQL 8.0.35，我們先來看看 ...
  • 記一次線上問題引發的對 Mysql 鎖機制分析
    最近雙十一開門紅期間組內出現了一次因 Mysql 死鎖導致的線上問題，當時從監控可以看到資料庫活躍連接數飆升，導致應用層資料庫連接池被打滿，後續所有請求都因獲取不到連接而失敗 ...
  • 實例講解資料庫的定義重載函數
    在本文中，我們將介紹GaussDB資料庫中的用戶定義函數重載的概念、用法以及示例。用戶定義函數是 SQL 中常用的“編程工具”，允許我們自定義函數來處理和操作數據。 ...
  • 圖形化探索：快速改造單實例為雙主、MGR、讀寫分離等架
    單機GreatSQL/MySQL調整架構為多副本複製的好處有哪些？為什麼要調整？ 性能優化：如果單個GreatSQL伺服器的處理能力達到瓶頸，可能需要通過主從複製、雙主複製或MGR，以及其他高可用方案等來提高整體性能。通過將讀請求分發到多個伺服器，可以大大提高併發處理能力。 高可用性：如果您的應用程 ...
  • JS判斷點是否線上段上
    本文利用向量的點積和叉積來判斷點是否線上段上。 基礎知識補充 從零開始的高中數學——向量、向量的點積、帶你一次搞懂點積（內積）、叉積（外積）、Unity游戲開發——向量運算（點乘和叉乘 說明 點積可以用來判斷兩個向量的夾角，如果這個夾角是0或者180度，說明這個點在直線上； 叉積可以用來判斷一個點到 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類