成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

vue組件：canvas實(shí)現(xiàn)圖片涂鴉功能

roland_reed / 3876人閱讀

摘要：方案背景需求需要對(duì)圖片進(jìn)行標(biāo)注，導(dǎo)出圖片。對(duì)應(yīng)方案用實(shí)現(xiàn)涂鴉圓形矩形的繪制，最終生成圖片編碼用于上傳大量圖片批量上傳很耗時(shí)間，為了提高用戶體驗(yàn)，改為只實(shí)現(xiàn)圓形矩形繪制，最終保存成坐標(biāo)，下次顯示時(shí)根據(jù)坐標(biāo)再繪制。

方案背景

需求

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

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

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

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

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

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

多邊形區(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

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

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

清空畫(huà)布

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ī)碼就可以解決。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98838.html

相關(guān)文章

  • 利用vue制作在線涂鴉板

    摘要：撤銷(xiāo)清空等操作撤銷(xiāo)前進(jìn)清空清空前后數(shù)據(jù)恢復(fù)到默認(rèn)數(shù)據(jù)地址查看代碼 效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API簡(jiǎn)介 調(diào)用方法 getImageData() 返回ImageData對(duì)象，該對(duì)象為畫(huà)布上指定的矩形復(fù)制像素?cái)?shù)據(jù) putImageData() 把圖像數(shù)據(jù)（從指定的 Imag...

    nemo 評(píng)論0 收藏0

  • Canvas 涂鴉

    摘要：第二步，消除涂鴉鋸齒的辦法簡(jiǎn)單的繪制和圖片保存完成了，但是在這種情況下，線條會(huì)有很明顯的鋸齒靈魂畫(huà)手來(lái)了。在經(jīng)過(guò)搜索查閱之后，發(fā)現(xiàn)有一個(gè)繪制辦法可以降低鋸齒的問(wèn)題。橡皮擦的原理是，將橡皮繪制的路徑覆蓋到原來(lái)的畫(huà)筆上。 第一步，我們先實(shí)現(xiàn)簡(jiǎn)單的繪制，并且在繪制之后將圖片保存到本地 var canvas = document.getElementById(canvas), ...

    thekingisalwaysluc 評(píng)論0 收藏0

  • 基于 vue-upload-component 封裝一個(gè)圖片上傳組件

    摘要：預(yù)覽因?yàn)轫?xiàng)目是基于做的，本身就提供了的預(yù)覽組件，使用起來(lái)也簡(jiǎn)單，如果業(yè)務(wù)需求需要放大縮小，這個(gè)組件就不滿足了。 需求分析 業(yè)務(wù)要求，需要一個(gè)圖片上傳控件，需滿足 多圖上傳 點(diǎn)擊預(yù)覽 圖片前端壓縮 支持初始化數(shù)據(jù) 相關(guān)功能及資源分析 基本功能先到https://www.npmjs.com/search?q=vue+upload上搜索有關(guān)上傳的控件，沒(méi)有完全滿足需求的組件，過(guò)濾后找到...

    wangbjun 評(píng)論0 收藏0

  • vue-avatar-tailor，vue頭像裁剪組件

    摘要：實(shí)現(xiàn)原理簡(jiǎn)單，純技術(shù)處理圖片，幾乎不需要用到相關(guān)知識(shí)面向人群急于使用頭像裁剪組件的同學(xué)。裁剪框初始寬高上傳圖片后，裁剪區(qū)將預(yù)設(shè)為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續(xù)優(yōu)化。 項(xiàng)目簡(jiǎn)介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無(wú)需安裝依賴 使用九宮格進(jìn)行裁剪，自由選擇裁剪區(qū)域。 實(shí)時(shí)預(yù)覽裁剪后效果。 可以將裁剪好的圖片，...

    imccl 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<