年來，隨著無線互聯網、智能手機和各種社交APP的興起，廣大用戶對圖片處理的需求越來越大，而在圖片處理領域，Adobe的公司Photoshop軟件是絕對的王者，堪稱是行業的引領者。

但是，Adobe的Photoshop軟件也有它的槽點，那就是過于“專業”，不僅對電腦硬件配置要求高，其學習和使用成本也高，令很多普通用戶望而卻步。

某些時候用戶也不需要那么強大、復雜的功能，只需要對圖片進行輕度處理，這個時候，用戶往往會去選擇使用一些第三方的圖片處理軟件，比如美圖秀秀等等。

近些年，Adobe已經意識到這個問題，并且在致力于Photoshop輕量化方面做出了一些有益的嘗試，近期Adobe在這方面又有新的進展，將推出PS網頁版。

使用網頁版的Photoshop，用戶需要訪問 Adob?e Creative Cloud。雖然評論和注釋等功能以前已經可用，可進行編輯，如操作圖層、選擇區域和應用蒙版等基本操作，當然，其功能肯定無法比安裝版相比。

據悉，WebAssembly及其 C++工具鏈Emscripten是支持Photoshop推出網頁版的兩項關鍵底層技術。

WebAssembly 是一種可移植的二進制指令集，主流瀏覽器均提供支持，使用 C++ 編寫的應用程序（例如 Photoshop）可以直接移植到 Web 上，而無需使用客戶端的JavaScript 代碼進行重寫，后者是難度極高而繁瑣的過程。

而Emscripten是一個功能齊全的工具鏈，可將C++代碼編譯為WebAssembly，并且提供了一個轉換層，可以將 POSIX API 調用轉換為 Web API調用，甚至支持將OpenGL 轉換為 WebGL運行。

有了這兩項關鍵的底層技術支持，Adob??e可以不必完全從頭開發，可利用現有的大部分Photoshop 代碼庫，推出網頁版的難度大大降低。

目前，網頁版的PS 只能在谷歌Chrome和微軟的Edge瀏覽器中使用， 某些基于Chromium 內核的瀏覽器也有可能可正常使用，但未經嚴格驗證，據悉，后續也加會加入對Firefox瀏覽器的支持，但并未給出明確時間。

當然，這些都是Adob??e方面的一面之詞，其實際體驗究竟如何，還需要接受廣大用戶檢驗。

載說明：原創不易，未經授權，謝絕任何形式的轉載

通過WebAssembly + Emscripten、Web Components + Lit、Service Workers + Workbox以及對新的Web API的支持，Chrome和Adobe之間的合作使得將Photoshop桌面應用程序引入Web成為了一項重大的里程碑。現在，您可以在瀏覽器上使用高度復雜和圖形密集的軟件，只需訪問photoshop.adobe.com。這一成就得益于Adobe工程師多年來的不懈努力，以及與Chrome等瀏覽器供應商緊密合作，共同推動了Web技術的發展。

愿景：在瀏覽器中使用Photoshop

多年來，Photoshop一直是圖像編輯和平面設計的頂級工具，為創意工作者在Windows和macOS上提供了無限的創作可能性。然而，如今我們有機會讓它擺脫桌面的束縛，打開嶄新的大門。

在互聯網的幫助下，我們可以實現隨時隨地、輕松編輯和協作的愿景。用戶只需打開瀏覽器，就可以立即開始編輯，不再需要繁瑣的軟件安裝。而且，他們可以在不同的設備之間毫不費力地切換。

連接性是關鍵，它讓我們能夠分享工作流程。現在，Photoshop文檔可以通過簡單的URL鏈接進行訪問，而不再埋藏在復雜的文件系統中。這使創作者可以輕松地與合作者共享他們的作品。

最令人興奮的是，這種新方式也跨越了平臺的邊界。通過網絡運行，我們可以讓Photoshop適應多種操作系統，讓更多的用戶能夠輕松訪問它。

然而，要實現這一愿景，我們需要克服重大的技術挑戰，重新思考如何讓像Photoshop這樣強大的應用程序在互聯網上運行。

但是實現這一愿景面臨著重大的技術挑戰，需要重新思考像Photoshop這樣強大的應用程序如何在網絡上運行。

新的Web功能釋放了Photoshop的潛力

近年來，出現了一些能夠通過標準化和實施來實現類似于Photoshop的應用程序的Web平臺功能。Adobe工程師創新地充分利用了幾個關鍵的下一代API：

高性能本地文件訪問與源私有文件系統（OPFS技術）

在Photoshop中，我們經常需要讀寫可能非常大的PSD文件。這要求對本地文件系統進行高效的訪問。新的Origin私有文件系統API（OPFS）為我們提供了一個快速的、特定于Origin的虛擬文件系統，使我們能夠更輕松地處理這些文件。

const opfsRoot = await navigator.storage.getDirectory();

OPFS 可以快速創建、讀取、寫入和刪除文件。例如：

// Create file
const file = await opfsRoot.getFileHandle('image.psd', {create: true}); 

// Get read/write handle 
const handle = await file.createSyncAccessHandle();

// Write contents  
handle.write(buffer); 

// Read contents
handle.read(buffer);

// Delete file
await file.remove();

要實現絕對最快的同步操作，Web Workers可以發揮關鍵作用。

這個本地高性能文件系統對于在瀏覽器中實現復雜的Photoshop文件工作流程至關重要。它為我們提供了在瀏覽器中高效處理文件的關鍵支持。

釋放WebAssembly的力量

WebAssembly在JavaScript中的重新實現已成為Photoshop計算密集型圖形處理的關鍵組成部分。Adobe借助Emscripten編譯器，將現有的C/C++代碼庫移植到WebAssembly模塊中。

以下是幾個WebAssembly的重要功能：

• 線程（Threads） - Photoshop使用工作線程來并行執行任務，如處理圖像塊。

// Thread function
void* tileProcessor(void* data) {
  // Process image tile data 
  return NULL;
}

// Start worker threads 
pthread_t thread1, thread2;
pthread_create(&thread1, NULL, tileProcessor, NULL);
pthread_create(&thread2, NULL, tileProcessor, NULL);

// Wait for threads to finish
pthread_join(thread1, NULL);
pthread_join(thread2, NULL);

• SIMD - SIMD向量指令加速了像素處理和濾波。
• 異常處理 （Exception handling）- C++異常在Photoshop的代碼庫中廣泛使用，因此在WebAssembly中的支持非常重要。
• 流式實例化（Streaming instantiation） - Photoshop的80MB+的WASM模塊需要進行流式編譯，以提高性能和效率。
• 調試 - 在Chrome的DevTools中提供的WebAssembly調試支持對于開發和調試非常有價值。

利用廣色域P3

sRGB的色彩范圍在很多情況下受限，與更廣泛的P3色域相比顯得相形見絀，但長期以來在網絡上一直是唯一的選擇。

然而，現在Photoshop正在利用新的color()功能和Canvas API來釋放P3色域的全部潛力，以實現更準確的顏色呈現。這意味著我們可以在Web上展現更豐富和更生動的色彩，使視覺體驗更加引人入勝。

color: color(display-p3 1 0.5 0)

UI靈活性與Web組件

Photoshop是Adobe更廣泛的創意云生態系統的一部分。利用基于Lit的標準化Web組件策略，實現了應用程序之間的界面一致性。

Photoshop的用戶界面元素源自Adobe的Spectrum Web Components庫，這個庫實現了Adobe的設計系統。Spectrum Web Components具有以下特點：

• 默認支持無障礙訪問 - 在開發過程中考慮了各種現有和新興瀏覽器規范，以支持輔助技術，使應用更加包容和易于訪問。
• 輕量級 - 使用LitElement實現，以確保最小的性能開銷，使界面快速響應。
• 基于標準 - 基于Web組件標準構建，包括自定義元素和Shadow DOM，以確保與現代瀏覽器的兼容性。
• 無框架偏好 - 由于瀏覽器級別的支持，這些組件可以與任何前端框架一起使用，增加了靈活性。

此外，整個Photoshop應用程序都是使用基于Lit的Web組件構建的。Lit的模板和虛擬DOM差異比較使得UI更新更加高效。Web組件的封裝性也使得在需要時輕松集成其他團隊的React代碼成為可能。

總的來說，Web組件的瀏覽器原生自定義元素結合Lit的性能，為Adobe構建Photoshop復雜的用戶界面提供了所需的靈活性，同時保持了高效性。

優化Photoshop在瀏覽器中的性能

盡管新的Web功能為基礎提供了支持，但像Photoshop這樣的強大桌面應用程序仍然需要大量的追蹤和性能優化工作，以實現在線一流的體驗。這包括對性能瓶頸的深入分析，對資源的有效管理，以及對用戶界面的細致調整，以確保用戶獲得最佳的在線使用體驗。這個過程需要不斷的努力和改進，以確保Photoshop在Web上能夠保持其卓越的性能和功能。

使用Service Workers緩存資源和代碼

Service Workers是一項重要的Web技術，允許Web應用程序在初始訪問后將其各種資產、代碼和其他資源本地緩存，從而實現更快的加載時間。雖然這并不能使應用程序完全離線可用，但Photoshop已經充分利用了Service Workers來緩存其WebAssembly模塊、腳本以及其他關鍵資產。這意味著用戶在訪問時可以更快地加載Photoshop，并且在以后的訪問中可以更快速地訪問緩存的內容，提升了應用程序的整體性能和響應速度。這是一個重要的優化步驟，有助于改善用戶體驗。

Chrome DevTools 應用面板 > 緩存存儲顯示了 Photoshop 為 Web 預緩存的不同類型資源。在這里，我們可以看到一些被代碼拆分的 JavaScript 塊，它們被本地緩存，從而實現了非常快速的后續加載。

這種緩存機制極大地提高了加載性能。在第一次訪問后，后續的加載通常非常快（M1 MacBook）。

這種緩存機制極大地提高了加載性能。在第一次訪問之后，通常可以體驗到非常快速的加載速度（尤其是在M1 MacBook上）。

Adobe使用Workbox庫更輕松地將Service Worker緩存集成到他們的構建過程中，這使得整個緩存策略的實施更為便捷，確保了在Web上提供快速和流暢的Photoshop體驗。這是一個非常重要的技術，有助于提升Web應用程序的性能和響應速度。

V8緩存資源的優化V8緩存資源的優化

V8引擎在資源從Service Worker緩存中返回時采取了一些優化措施，以提高性能：

• 在安裝階段緩存的資源會被急切地編譯，以確保代碼的一致性和快速性能，這意味著在第一次訪問時資源已經準備好，可以立即使用。
• 通過緩存API緩存的資源進行了優化，以在第二次加載時更快地提供，相比傳統的緩存方式，性能更出色。
• V8引擎根據緩存和更積極地編譯來檢測資源的重要性，以確保關鍵資源能夠得到更高效的處理。

這些優化功能對于Photoshop大量緩存的Wasm模塊非常有幫助，使得這些模塊能夠以更快的速度加載和執行，提升了整個應用程序的性能。

由于V8代碼緩存的部分幫助，Photoshop網絡加載關鍵視圖的后續加載速度更快。

流式傳輸和緩存大型WebAssembly模塊

Photoshop的代碼庫需要多個大型的WebAssembly模塊，其中一些超過80MB。V8引擎和Chrome中的流式編譯支持可以高效處理這些龐大的模塊。

此外，當首次從服務工作者請求WebAssembly模塊時，V8引擎會生成并存儲一個經過優化的版本到緩存中，這對于Photoshop這樣龐大的代碼庫至關重要。這一優化措施確保了第一次訪問時的性能表現，同時減少了后續訪問時的加載時間，提高了Photoshop Web版的整體性能和響應速度。

多線程用于并行圖形操作

在Photoshop中，許多核心圖像處理操作，例如像素轉換，通過多線程的并行執行可以大大提高速度。WebAssembly的線程支持使得能夠充分利用多核設備進行計算密集型的圖形任務。

這一技術使得Photoshop能夠在WebAssembly上采用與桌面端相同的多線程方法，以處理性能關鍵的圖像處理功能。這不僅提高了性能，還允許更快速的圖像處理和更流暢的用戶體驗。這是Web版Photoshop實現卓越性能的關鍵因素之一。

優化WebAssembly的調試

在開發過程中，強大的WebAssembly調試支持對于診斷和解決性能瓶頸至關重要。

Chrome DevTools具有出色的功能，可以對WebAssembly代碼進行性能分析、設置斷點，并檢查豐富的變量，與JavaScript的調試能力相似。這使開發人員能夠更輕松地分析和優化WebAssembly代碼，以確保其在Web上的執行效率和性能達到最佳水平。這些調試工具是提高Web版Photoshop性能和可維護性的重要資源。

將On-Device Machine Learning與TensorFlow.js集成

最近的Photoshop網絡版本引入了基于TensorFlow.js的人工智能功能。這個重要的改進允許模型在用戶設備上本地運行，而不是依賴云端計算，從而提高了隱私、降低了延遲并減少了成本。

TensorFlow.js是由Google開發的開源機器學習庫，旨在為JavaScript開發人員提供一個在瀏覽器中運行的客戶端解決方案。它是Web機器學習的最成熟選擇之一，支持全面的WebGL和WebAssembly后端操作符，未來還計劃提供WebGPU后端選項，以進一步提高性能，適應新的Web標準發展。

這項改進的主要功能之一是使用機器學習技術自動提取圖像中的主要前景對象，這極大地加快了復雜選擇的速度。這一集成進一步提升了Photoshop Web版的功能，使其更加強大和高效。

我有一幅日落的插圖，我想把它改成夜晚的場景。我使用了“選擇主題”和人工智能提示來嘗試選擇最有趣的區域進行更新。

Photoshop能夠根據我的AI提示生成一幅更新的插圖

以及幾種不同的風格的插圖。

該模型已從TensorFlow轉換為TensorFlow.js，以實現本地執行。

// Load Select Subject model
const model = await tf.loadGraphModel('select_subject.json');

// Run inference on image tensor  
const {mask, background} = model.execute(imgTensor);

// Refine selection from mask

Adobe和Google的合作非常重要，他們共同開發了一個用于Emscripten的代理API，以解決Photoshop的WebAssembly代碼與TensorFlow.js之間的同步問題。這個API允許兩個框架之間的無縫集成。

此外，Google團隊通過優化TensorFlow.js的硬件執行性能，利用了多種后端支持（包括WebGL、WebAssembly和Web GPU），使機器學習模型的性能提升了30%至200%。特別是對于大型模型，這一優化效果更為顯著，使得在瀏覽器中實現接近實時性能成為可能。這對于提高Web版Photoshop的性能和功能是一項重大的技術進步，為用戶提供更快速和更強大的工具。

重點模型進行了優化，特別關注了性能關鍵操作，例如 Conv2D。這使得Photoshop可以根據性能需求選擇在用戶設備上本地運行模型，還是在云端進行運算。

如果您希望了解有關TensorFlow.js在Photoshop中的更多詳細信息，請查閱相關文章和文檔。這些信息將提供有關如何實現這些優化、性能改進以及Photoshop的Web版本中的機器學習功能的更多背景和技術細節。

https://blog.tensorflow.org/2023/03/how-adobe-used-web-ml-with-tensorflowjs-to-enhance-photoshop-for-web.html

Photoshop的未來在Web上的發展

Photoshop在Web上的發展代表著一個巨大的里程碑，但僅僅觸及了潛在可能性的表面。

未來，Photoshop將繼續擴展其在Web上的功能，隨著瀏覽器供應商不斷演進Web標準和性能，它將通過漸進增強的方式在線提供更多功能。而Photoshop只是開始。Adobe計劃積極構建其完整的創意云套件，以在瀏覽器中解鎖更多復雜的設計應用程序。

Adobe和瀏覽器工程師之間的合作將持續推動Web作為一個強大的平臺，通過推進標準和性能改進，為更具野心的應用程序提供支持。未來將充滿令人興奮的機遇和創新，我們可以期待看到更多出色的Web應用程序和創意工具涌現出來。這將是一個創意和技術蓬勃發展的時代！

嘗試在瀏覽器上使用Photoshop web 版

Photoshop Web版目前已經可以在以下瀏覽器版本中運行：

• Chrome 102+
• Edge 102+
• Firefox 111+

并且Adobe正在積極努力彌合對Safari瀏覽器的支持差距。您可以立即在photoshop.adobe.com上嘗試這一版本。未來的創意和設計已經觸手可及，它們將在網絡上綻放新的可能性，就在您的指尖！

由于文章內容篇幅有限，今天的內容就分享到這里，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請別忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想獲取更多前端技術的知識，歡迎關注我，您的支持將是我分享最大的動力。我會持續輸出更多內容，敬請期待。