canvas實作圖片塗鴉功能（附程式碼）

這篇文章帶給大家的內容是關於canvas實現圖片塗鴉功能（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

需求

1. 需要對圖片進行標註，匯出圖片。

2. 需要標註N多圖片最後同時儲存。

3. 需要根據多邊形區域資料（區域、顏色、名稱）標註。

對應方案

1. 用canvas實作塗鴉、圓形、矩形的繪製，最後產生圖片base64編碼用來上傳

2. 大量圖片批次上傳很耗時，為了提高使用者體驗，改為只實現圓形、矩形繪製，最終保存成座標，下次顯示時根據座標再繪製。

3. 多邊形區域的顯示是根據座標點繪製，名稱顯示的位置為多邊形質心。

程式碼

必須傳入的參數

• ##圖片路徑

url: string

• 繪圖區域寬度

width: string

• 繪圖區域高度

height: string

選擇傳入的參數

• 是否可以繪製,預設true

canDraw: boolean

• 座標點資訊,不傳入則不繪製

info: string

• #是否可繪製，預設true

canDraw: boolean

• 繪圖顏色，預設red

lineColor: string

• 繪圖筆寬度，預設2
  ##

  lineWidth: number

  登入後複製

#繪圖筆類型，rec、circle，預設rec

• lineType: string

  登入後複製

• clean()

  登入後複製

• #

  getInfo()

  登入後複製
特殊說明

• 網域不同的圖片可能有跨域問題，看過很多資料沒有太好的辦法，最後專案中是用node服務做了一個圖片轉為base64的接口，再給canvas繪製解決的。不一定適用於其他項目，如果有更好的辦法解決歡迎分享。

• 匯出座標點資料只能匯出規則圖案的座標點，因為隨意塗鴉的座標點太多時會崩潰的（雖然沒試過具體到什麼程度會崩潰），如果有高性能的實現方式歡迎分享。

• 如果塗鴉後儲存再請求圖片url出現請求不到的情況，是因為CDN快取的問題，在圖片路徑後面拼個隨機碼就可以解決。
#

以上是canvas實作圖片塗鴉功能（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！