小編給大家分享一下canvas如何實(shí)現(xiàn)圖片涂鴉功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)|網(wǎng)站維護(hù)公司|優(yōu)化|托管以及網(wǎng)絡(luò)推廣，積累了大量的網(wǎng)站設(shè)計(jì)與制作經(jīng)驗(yàn)，為許多企業(yè)提供了網(wǎng)站定制設(shè)計(jì)服務(wù)，案例作品覆蓋資質(zhì)代辦等行業(yè)。能根據(jù)企業(yè)所處的行業(yè)與銷售的產(chǎn)品，結(jié)合品牌形象的塑造，量身制作品質(zhì)網(wǎng)站。

需求

1. 需要對(duì)圖片進(jìn)行標(biāo)注，導(dǎo)出圖片。

2. 需要標(biāo)注N多圖片最后同時(shí)保存。

3. 需要根據(jù)多邊形區(qū)域數(shù)據(jù)（區(qū)域、顏色、名稱）標(biāo)注。

對(duì)應(yīng)方案

1. 用canvas實(shí)現(xiàn)涂鴉、圓形、矩形的繪制，最終生成圖片base64編碼用于上傳

2. 大量圖片批量上傳很耗時(shí)間，為了提高用戶體驗(yàn)，改為只實(shí)現(xiàn)圓形、矩形繪制，最終保存成坐標(biāo)，下次顯示時(shí)根據(jù)坐標(biāo)再繪制。

3. 多邊形區(qū)域的顯示是根據(jù)坐標(biāo)點(diǎn)繪制，名稱顯示的位置為多邊形質(zhì)心。

代碼

必須傳入的參數(shù)

• 圖片路徑

url: string

• 繪圖區(qū)域?qū)挾?/p>

width: string

• 繪圖區(qū)域高度

height: string

選擇傳入的參數(shù)

• 是否可以繪制,默認(rèn)true

canDraw: boolean

• 坐標(biāo)點(diǎn)信息,不傳入則不繪制

info: string

• 是否可繪制，默認(rèn)true

canDraw: boolean

• 繪圖顏色，默認(rèn)red

lineColor: string

• 繪圖筆寬度，默認(rèn)2

lineWidth: number

• 繪圖筆類型，rec、circle，默認(rèn)rec

lineType: string

可以調(diào)用的方法

• 清空畫布

clean()

• 返回坐標(biāo)點(diǎn)信息

getInfo()

特殊說(shuō)明

• canvas對(duì)象不能獲得坐標(biāo),是通過(guò)父元素坐標(biāo)獲取的，所以該組件的父元素以上的層級(jí)不能有太多的定位、嵌套，否則繪制坐標(biāo)會(huì)偏移。

• 域名不同的圖片可能存在跨域問(wèn)題，看過(guò)很多資料沒(méi)有太好的辦法，最后項(xiàng)目中是用node服務(wù)做了一個(gè)圖片轉(zhuǎn)為base64的接口，再給canvas繪制解決的。并不一定適用于其他項(xiàng)目，如果有更好的辦法解決歡迎分享。

• 導(dǎo)出坐標(biāo)點(diǎn)數(shù)據(jù)只能導(dǎo)出規(guī)則圖案的坐標(biāo)點(diǎn)，因?yàn)殡S意涂鴉的坐標(biāo)點(diǎn)太多時(shí)會(huì)崩潰的（雖然沒(méi)試過(guò)具體到什么程度會(huì)崩潰），如果有高性能的實(shí)現(xiàn)方式歡迎分享。

• 如果涂鴉后保存再請(qǐng)求圖片url出現(xiàn)請(qǐng)求不到的情況，是因?yàn)镃DN緩存的問(wèn)題，在圖片路徑后面拼個(gè)隨機(jī)碼就可以解決。

以上是canvas如何實(shí)現(xiàn)圖片涂鴉功能的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

本文標(biāo)題：canvas如何實(shí)現(xiàn)圖片涂鴉功能-創(chuàng)新互聯(lián)
新聞來(lái)源：http://weahome.cn/article/ejoch.html