如何扭轉局面 - 在瀏覽器中處理大圖像

節省了時間- 在瀏覽器中處理大圖像" />

客戶上傳了28 張圖像，每張大約5800 x 9500 像素 和28 MB 大小。當嘗試在瀏覽器中顯示這些圖像時，整個選項卡凍結了 - 甚至拒絕關閉 - 長達 10 分鐘。這是在配備 Ryzen 9 CPU 和 RTX 4080 GPU 的高階機器上進行的，而不是小型筆記型電腦。

情況如下

在我們的 CMS (Grace Web) 中，當管理員上傳檔案（無論是圖片還是影片）時，我們會在上傳完成後立即顯示它。這對於用戶體驗來說非常好 - 它確認上傳成功，他們上傳了他們想要的內容，並且它顯示了 UI 的響應能力以獲得更好的感覺。

但是這些巨大的圖像，瀏覽器幾乎無法顯示它們並凍結了。

要注意的是，問題不在於上傳本身，而在於顯示這些大圖像。同時一張一張渲染 28 張巨大的圖像實在是太多了。即使在空白頁上，也只是...不。

為什麼會發生這種情況（深入探討）？

任何時候您在 中顯示圖片時在圖像加載和佈局重新計算期間，瀏覽器會經歷一個使用CPU、RAM、GPU（有時甚至是驅動器）的整個過程，有時甚至會在顯示圖片之前多次循環執行此過程。它經歷了計算像素、在硬體之間傳輸資料、插值演算法等。對於瀏覽器來說，這是一個重要的過程。

集思廣益的解決方案

我們考慮了幾個選項：

1. 上傳後立即調整大小並顯示縮圖
   • 問題：調整大小可能需要太長時間，並且不能保證立即完成，特別是在調整大小隊列不為空的情況下 - 導致系統不響應。
2. 檢查檔案大小並僅顯示大檔案的名稱
   • 問題：這會降低使用者體驗，特別是對於那些需要對任何媒體資料進行更好控制和檢查的使用者（順便說一句，這些資料通常是具有大檔案的相同資料）。

這些解決方案都感覺不可用。我們不想限制管理員上傳所需內容的能力，也不想在使用者體驗上妥協。

燈泡！使用

我記得 element 更有效地利用 GPU 來渲染內容。我最近看到有人使用 JavaScript 和 建立安靜的複雜遊戲，因此理論上它應該比 更有效地處理大圖像。

測試理論

我們決定替換 帶有 的元素用於顯示上傳的圖像。這是我們使用的程式碼片段：

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const img = new Image();
// img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files
img.src = filesroot + data.file_path; // Our existing file path
img.onload = function() {
  // Resize canvas to desired size (for preview)
  canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed
  canvas.height = 80;
  // Draw the image onto the canvas, resizing it in the process
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail
  file_div.appendChild(canvas);
};




<h3>
  
  
  結果
</h3>

<p>改善是立竿見影的！瀏覽器不僅可以毫無問題地處理28 張大圖像，而且我們還通過加載<strong>120 MB 圖像</strong>測量<strong>28,000 x 17,000 像素</strong>進一步推動它，並且它仍然可以正常工作是一個小圖標。 </p>

<h3>
  
  
  差異在哪裡？
</h3>

<p>使用元素，繪圖完全掌握在 GPU 手中，而這些晶片實際上就是為此任務而製造的。 </p>

<ul>
<li>
<img  alt=" 如何扭轉局面 - 在瀏覽器中處理大圖像" >;仍嘗試渲染 28,000 * 17,000 = 476,000,000 像素。 </li>
<li>這個只繪製 80 * 80 = 6,400 像素。 </li>
</ul>

<p>透過調整<canvas> 中的圖像大小到較小的預覽尺寸，我們大大減少了瀏覽器需要處理的數據量- 將數億像素發送到GPU 並返回數千個像素，這很大，對吧？ </canvas></p>

<h2>
  
  
  下一步
</h2>

<p>鑑於這一成功，我們現在正在考慮替換 <img  alt=" 如何扭轉局面 - 在瀏覽器中處理大圖像" >與 在我們應用程式的其他部分，特別是在一次顯示大約 250 張圖像的管理螢幕中。雖然這些圖像已經正確調整了大小，但我們很好奇是否使用 <canvas>可以提供更好的性能。 </canvas></p>

<p>我們將進行測試和基準測試來衡量任何效能提升。我一定會在以後的文章中分享我們的發現。 </p>

<h2>
  
  
  重要警告
</h2>

<p>使用<canvas>時為我們的特定用例創造了奇蹟，我必須注意，您<strong>不應該使用 <canvas>;用於在網站面向公眾的部分顯示圖像</canvas></strong>。原因如下：</canvas></p>
<ul>
<li>
<strong>輔助功能</strong>：<img  alt=" 如何扭轉局面 - 在瀏覽器中處理大圖像" >;螢幕閱讀器可以讀取元素，為視障使用者提供協助。 </li>
<li>
<strong>SEO</strong>：搜尋引擎索引來自 <img  alt=" 如何扭轉局面 - 在瀏覽器中處理大圖像" > 的圖像標籤，可以提高網站的可見度。 （同樣，人工智慧訓練抓取工具也會對圖像進行「索引」。好吧，你能做什麼...）</li>
<li>
<img  alt=" 如何扭轉局面 - 在瀏覽器中處理大圖像" >;與;可用於自動檢測像素密度並顯示更大或更小的圖片以實現完美契合 - <canvas>不能。我寫了一篇關於如何建立您的 .</canvas>
</li>
</ul>

<p>對於公共網站，最好在將圖像提供給使用者之前在伺服器端正確調整圖像大小。如果您對如何自動調整圖像大小和優化感興趣，我寫了一篇關於該主題的文章，您可能會覺得有用。 </p>

<h2>
  
  
  結論
</h2>

<p><strong>我喜歡優化！ </strong>儘管我們每天都在向本地高效能硬體邁進，但透過最佳化 - 即使「它很好，但還可以更好」 - 我們可以防止此類問題開始。 </p>

<p>這種方法不是標準的。而且我不太關心標準。它們通常被視為硬性規則，但它們只是指導方針。這個解決方案很合適。我們沒有客戶擁有沒有堅實的的古老設備。支持。所以，即使現在我們有更多的程式碼需要管理，有多種顯示圖片的方式，但它非常適合，這才是重要的！ </p>

<p><strong>你有類似的經驗嗎？你是怎麼處理的？歡迎在下面的評論中分享您的經驗或提出問題！ </strong></p>


          </div>

            
        

以上是 如何扭轉局面 - 在瀏覽器中處理大圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！