資訊專欄INFORMATION COLUMN
摘要：方案背景需求需要對圖片進行標注，導出圖片。對應方案用實現涂鴉圓形矩形的繪制，最終生成圖片編碼用于上傳大量圖片批量上傳很耗時間，為了提高用戶體驗，改為只實現圓形矩形繪制，最終保存成坐標，下次顯示時根據坐標再繪制。
方案背景
需求
需要對圖片進行標注，導出圖片。
需要標注N多圖片最后同時保存。
需要根據多邊形區域數據（區域、顏色、名稱）標注。
對應方案
用canvas實現涂鴉、圓形、矩形的繪制，最終生成圖片base64編碼用于上傳
大量圖片批量上傳很耗時間，為了提高用戶體驗，改為只實現圓形、矩形繪制，最終保存成坐標，下次顯示時根據坐標再繪制。
多邊形區域的顯示是根據坐標點繪制，名稱顯示的位置為多邊形質心。
代碼必須傳入的參數
圖片路徑
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()特殊說明
canvas對象不能獲得坐標,是通過父元素坐標獲取的，所以該組件的父元素以上的層級不能有太多的定位、嵌套，否則繪制坐標會偏移。
域名不同的圖片可能存在跨域問題，看過很多資料沒有太好的辦法，最后項目中是用node服務做了一個圖片轉為base64的接口，再給canvas繪制解決的。并不一定適用于其他項目，如果有更好的辦法解決歡迎分享。
導出坐標點數據只能導出規則圖案的坐標點，因為隨意涂鴉的坐標點太多時會崩潰的（雖然沒試過具體到什么程度會崩潰），如果有高性能的實現方式歡迎分享。
如果涂鴉后保存再請求圖片url出現請求不到的情況，是因為CDN緩存的問題，在圖片路徑后面拼個隨機碼就可以解決。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98838.html
摘要：撤銷清空等操作撤銷前進清空清空前后數據恢復到默認數據地址查看代碼 效果展示 showImg(https://segmentfault.com/img/bVHJXf?w=1550&h=846); Canvas API簡介 調用方法 getImageData() 返回ImageData對象，該對象為畫布上指定的矩形復制像素數據 putImageData() 把圖像數據（從指定的 Imag...
摘要：第二步，消除涂鴉鋸齒的辦法簡單的繪制和圖片保存完成了，但是在這種情況下，線條會有很明顯的鋸齒靈魂畫手來了。在經過搜索查閱之后，發現有一個繪制辦法可以降低鋸齒的問題。橡皮擦的原理是，將橡皮繪制的路徑覆蓋到原來的畫筆上。 第一步，我們先實現簡單的繪制，并且在繪制之后將圖片保存到本地 var canvas = document.getElementById(canvas), ...
摘要：預覽因為項目是基于做的，本身就提供了的預覽組件，使用起來也簡單，如果業務需求需要放大縮小，這個組件就不滿足了。 需求分析 業務要求，需要一個圖片上傳控件，需滿足 多圖上傳 點擊預覽 圖片前端壓縮 支持初始化數據 相關功能及資源分析 基本功能先到https://www.npmjs.com/search?q=vue+upload上搜索有關上傳的控件，沒有完全滿足需求的組件，過濾后找到...
摘要：實現原理簡單，純技術處理圖片，幾乎不需要用到相關知識面向人群急于使用頭像裁剪組件的同學。裁剪框初始寬高上傳圖片后，裁剪區將預設為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形，不能裁剪為矩形，該功能將在后續優化。 項目簡介 本組件是vue下的頭像裁剪組件，可以直接拷貝代碼使用，無需安裝依賴 使用九宮格進行裁剪，自由選擇裁剪區域。 實時預覽裁剪后效果。 可以將裁剪好的圖片，...
閱讀 1039·2019-08-30 12:57
閱讀 2113·2019-08-30 11:11
閱讀 2177·2019-08-29 15:20
閱讀 1869·2019-08-29 14:12
閱讀 3273·2019-08-28 17:51
閱讀 2377·2019-08-26 13:23
閱讀 785·2019-08-26 10:34
閱讀 3844·2019-08-23 12:37
