用HTML5 Canvas實現的類似Photoshop鋼筆和魔棒工具：Image Grabber

jopen 9年前發布 | 38K 次閱讀 圖形/圖像處理 Image Grabber

用HTML5 Canvas實現的類似Photoshop鋼筆和魔棒工具。

操作說明：

  1. 拖拽圖片到瀏覽器窗口
  2. 使用+和-進行縮放
  3. 魔棒工具點擊圖片，使用Delete/Backspace鍵可以刪除所選的像素
  4. 鋼筆工具繪制一個路徑，按選項面板的Mask按鈕可以只顯示路徑內的圖像
  5. 使用鋼筆工具時可以配合Option/Alt鍵來操作節點和控制桿
  6. 點擊Save按鈕會將當前畫布狀態輸出成圖片

實現說明：

  • 魔棒工具的算法使用的是Flood Fill，用了Web Workers來做計算，盡可能保證界面的響應
  • 蟻線參考Code Pen的這個示例。當圖像縮放到尺寸較大時有渲染性能問題
  • 鋼筆工具為了方便判斷，直線去曲線都是用bezierCurveTo方法來繪制，借鑒了Photoshop的交互，簡化了組合鍵和選擇交互
  • Mask遮罩選項使用Canvas Global Composite Operation提供的destination-in方式來繪制
在線演示

項目主頁：http://www.baiduhome.net/lib/view/home/1422966634436

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！