整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
【今天我必須發一個封面！放文末！】
最近有工友問我前端怎么給圖片做標注。使用 Fabric.js 或者 Konva.js 等庫確實可以實現，但多少覺得有點大炮打蚊的感覺，好奇有沒有專門做圖片標注的工具呢？
在網上搜了一下發現 Annotorious 可以實現這個功能。Annotorious 提供了圖片注釋和標注功能，而且用法很簡單。
本文分為 【快速入門】和【API講解】兩部分。
【快速入門】部分包含 Annotorious 的安裝、使用、導入導出的講解。這幾點應該是項目中比較核心的流程，給希望快速入門的工友提供一丟丟幫助。
【API講解】這部分主要講一下我認為比較常用的功能。注意：是“我認為”。
快速入門部分會講解Annotorious 的安裝、使用、導入和導出數據功能。
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.css">
<!-- 引入js -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.js"></script>
你可以把這兩份文件下載到自己的項目里再引入。
用以下命令安裝 Annotorious
npm install @recogito/annotorious
然后在項目中引入
import { Annotorious } from '@recogito/annotorious'
import '@recogito/annotorious/dist/annotorious.min.css'
把 Annotorious 安裝到項目后就可以使用了。
Annotorious 的用法很簡單，只需做以下2步：
CDN 和 NPM 在初始化時的用法稍微有點不同。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image' // 元素ID
})
</script>
使用 CDN 的方式引入 Annotorious，在初始化時要 Annotorious.init 這樣寫。
<img src="./img.jpg" id="my-image" />
<script>
const anno = new Annotorious({
image: document.getElementById('my-image') // 元素本身
})
</script>
使用 NPM 的方式引入 Annotorious 在初始化時需要 new Annotorious 這樣寫。
注意：在 Annotorious 初始化代碼最好放在你所使用的框架的頁面加載完成后的生命周期函數里！
如果你需要將圖片上的標注保存到服務器，就需要把數據導出。
所用到的方法是 getAnnotations()。
<button onclick="save()">保存</button>
<img src="./44.jpg" id="img" />
<script>
let anno = null
onload = function() {
anno = Annotorious.init({
image: 'img'
})
}
function save() {
let res = anno.getAnnotations()
console.log(res)
}
</script>
Annotorious 可以通過 loadAnnotations() 方法加載數據。
loadAnnotations(url) 支持傳入一個 URL 參數，這個 URL 所指的是數據文件地址。
比如我在本地創建一個 data.json 文件，文件內容是使用前面講到的 getAnnotations() 方法導出的數據，我的數據內容如下：
[
{
"@context": "http://www.w3.org/ns/anno.jsonld",
"type": "Annotation",
"body": [
{
"type": "TextualBody",
"value": "1",
"purpose": "commenting"
}
],
"target": {
"source": "http://127.0.0.1:5500/44.jpg",
"selector": {
"type": "FragmentSelector",
"conformsTo": "http://www.w3.org/TR/media-frags/",
"value": "xywh=pixel:100,100,500,300"
}
},
"id": "#cabe2e71-b19f-4499-80c6-235882fd50ba"
}
]
在本地測試時，我使用了本地服務器把 data.json 管理起來，在瀏覽器可以通過 http://127.0.0.1:5500/data.json 訪問到該文件。
然后再使用 loadAnnotations(url) 方法把數據渲染出來即可。
<button onclick="load()">加載</button>
<img src="./44.jpg" id="img" />
<script>
let anno = null
onload = function() {
anno = Annotorious.init({
image: 'img'
})
}
function load() {
anno.loadAnnotations("http://127.0.0.1:5500/data.json")
}
</script>
點擊加載按鈕后，圖片上就會出現一個選框，點擊選框可以看到數據已經成功加載出來。
但在實際項目中，后臺不一定會給前端返回一個文件地址，后臺可能會直接返回一個json數據。
這時候如果使用 loadAnnotations() 方法加載 json 數據是行不通的，要通過遍歷讀取數據中心的 data 里的數據，然后調用 addAnnotation() 方法將元素添加到頁面。
我使用 json-server 簡單的在本地搭建一個服務器給前端訪問對應的資源，前端用 axios 請求資源。
<button onclick="load()">加載</button>
<img src="./44.jpg" id="img" />
<script>
let anno = null
onload = function() {
anno = Annotorious.init({
image: 'img'
})
}
function load() {
axios.get('http://localhost:3000/anno')
.then(res => {
res.data.data.forEach(item => {
anno.addAnnotation(item)
})
})
}
</script>
很久之前寫過一篇 《『前端必備』本地數據接口 —— json-server 從入門到膨脹》 文章介紹 json-server 的基礎用法，有興趣的工友可以去瞧瞧。
這部分主要講一些我關注到的功能，如果想全面了解 Annotorious 可以查看文檔。
Annotorious 是根據瀏覽器的設置來確定使用哪種語言。
如果需要修改 Annotorious 使用的語言，可以在初始化時配置一下 locale 字段。
比如配置簡體中文可以用 zh-CN，配置繁體中文可以用 zh-TW。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
locale: 'zh-CN' // 修改語言
})
</script>
如果想自定義按鈕或者輸入框的提示文本可以配置 messages 。
<img src="./img.jpg" id="my-image" />
<script>
// 創建一個包含自定義消息的對象
var customMessages = {
"Add a comment...": "評論評論",
"Add a reply...": "回復兩句",
"Add tag...": "這是標簽啊",
"Cancel": "取消",
"Close": "關閉",
"Edit": "編輯~",
"Delete": "刪除?",
"Ok": "確定"
}
let anno = Annotorious.init({
image: 'my-image',
messages: customMessages // 自定義消息內容
})
</script>
如果同時配置了 locale 和 messages ，會優先使用 message 的值。
默認情況下，如果框選后沒輸入標簽或者評論就按確定是不會保存選框的。
如果想保存空選框，可以將 allowEmpty 設置為 true 。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
allowEmpty: true // 允許空注釋
})
</script>
有些鼠標指針可能并不是那么標準，會影響你框選的準確性。
如果需要非常準確去框選，可以開啟輔助線功能，只需將 crosshair 設置為 true 即可。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
crosshair: true // 開啟輔助線
})
</script>
如果不打算提供框選、添加和刪除信息的操作給用戶，可以將 readOnly 設置為 true 。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
readOnly: true // 只讀模式
})
</script>
如果只需要畫框框，不需要寫注釋，可以將 disableEditor 和 allowEmpty 同時設置為 true。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
allowEmpty: true, // 允許空注釋
disableEditor: true // 禁用編輯
})
</script>
為什么要同時將 allowEmpty 設為 true ？
因為如果你不允許注釋為空的話，當你點擊空白處時選框就會消失。
將 disableSelect 設置為 true 后，畫布上的選框就無法再次選中了。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
disableSelect: true // 禁止選中選框
})
</script>
雖然還沒想到有什么引用場景，但還是打算記錄一下。
箭頭所指的就是手柄。
手柄的默認半徑是6。如果需要修改手柄半徑可以設置 handleRadius 屬性。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
handleRadius: 20 // 設置手柄半徑
})
</script>
Annotorious 的選框和編輯器都是可以使用 css 設置樣式的。
選框部分使用了 SVG ，編輯器部分直接用了 HTML 元素。
對 SVG 不了解的工友可以閱讀 《SVG專欄》。
回到 Annotorious ，官方也有給出一個自定義樣式的案例 《Customizing Visual Appearance》。
<style>
/* 選框 */
/* 隱藏外部形狀-對于這種風格，我們只需要一個 */
svg.a9s-annotationlayer .a9s-selection .a9s-outer,
svg.a9s-annotationlayer .a9s-annotation .a9s-outer {
display:none;
}
svg.a9s-annotationlayer .a9s-handle .a9s-handle-outer {
display:none;
}
/* 虛線邊框 */
svg.a9s-annotationlayer .a9s-selection .a9s-inner,
svg.a9s-annotationlayer .a9s-annotation .a9s-inner {
stroke-width:4;
stroke:white;
stroke-dasharray:5;
}
/* 選中時的填充色 */
svg.a9s-annotationlayer .a9s-annotation.editable:hover .a9s-inner {
fill:transparent;
}
/* 手柄顏色 */
svg.a9s-annotationlayer .a9s-handle .a9s-handle-inner {
fill:white;
stroke:white;
}
/* 選中選框時，遮罩層顏色 */
svg.a9s-annotationlayer .a9s-selection-mask {
fill:rgba(0, 0, 0, 0.6);
}
/* 編輯器 */
/* 容器 */
.r6o-editor .r6o-editor-inner {
box-sizing: border-box;
padding: 10px;
border-radius: 6px;
background: #F4F2DE;
}
/* 箭頭 */
.r6o-editor .r6o-arrow:after {
background-color: #F4F2DE;
}
/* 編輯器 */
.r6o-widget.comment.editable,
.r6o-widget.r6o-tag {
background-color: #EEE3CB;
}
.r6o-widget.comment {
background-color: #D7C0AE;
}
.r6o-editor .r6o-editor-inner .r6o-widget {
border-bottom-color: #7C9D96;
}
.r6o-editor .r6o-editor-inner .r6o-widget.r6o-tag {
border-bottom: none;
}
/* 按鈕 */
.r6o-editor .r6o-btn {
border-radius: 100px;
background-color: #7C9D96;
border-color: #7C9D96;
color: #fff;
}
/* 線框按鈕 */
.r6o-editor .r6o-btn.outline {
color: #7C9D96;
background-color: transparent;
}
</style>
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
locale: 'zh-CN' // 修改語言
})
</script>
上面這份代碼選框的樣式是從 Annotorious 官網教程搬過來的。
編輯器的樣式我隨便配了一下，工友們也可以打開瀏覽器控制臺看 Elements 面板的 HTML 代碼，根據結構去修改樣式即可。
輸入時需要快速添加預選項時，可以這樣配置：
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image',
widgets: [
'COMMENT',
{ widget: 'TAG', vocabulary: [ '雷猴', '鯊魚辣椒', '蝎子萊萊'] }
]
})
</script>
使用 setDrawingTool(toolName) 方法可以設置不同的繪制工具。
如果需要講選框設置成多邊形，可以傳入 'polygon'。
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image'
})
anno.setDrawingTool("polygon")
</script>
想要知道當前有哪些繪圖工具，可以使用 anno.listDrawingTools() 方法查看
<img src="./img.jpg" id="my-image" />
<script>
let anno = Annotorious.init({
image: 'my-image'
})
const toolNames = anno.listDrawingTools()
console.log(toolNames)
</script>
除了上面介紹到的 API 外，Annotorious 還有很多玩法的，比如刪除指定注釋、清空所有注釋等。
詳情請看 《annotorious API文檔》
Annotorious 也有一些好玩的插件，有興趣的可以看看 《Annotorious 插件推薦》。
《提升日期處理效率：day.js 實戰經驗分享》
《OpenLayers.js 入門教程：打造互動地圖的入門指南》
《物理世界的互動之旅：Matter.js入門指南》
《p5.js 光速入門》
《眨個眼就學會了Pixi.js》
《Fabric.js 從入門到膨脹》
點贊 + 關注 + 收藏 = 學會了
明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。
SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。
與其他圖像比較，SVG 的優勢有以下幾點：
2.1、svg 標簽
SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：
eg：畫一條直線，完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height:600px;">
<svg width="300" height="300">
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>
</svg>
</body>
</html>上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。
使用語法：<svg viewBox=" x1,y1,width,height "></svg>
四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。
使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。
2.2、SVG 如何嵌入 HTML
SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？
2.2.1、embed 嵌入：
使用語法：<embed src="line.svg" type="image/svg+xml"></embed>
src是SVG文件路徑，type 表示 embed 引入文件類型。
優點：所有瀏覽器都支持，并允許使用腳本。
缺點：不推薦 html4 和 html 中使用，但 html5 支持。
2.2.2、object 嵌入：
使用語法：<object data="line.svg" type="image/svg+xml"></object>
data 是 SVG 文件路徑，type 表示 object 引入文件類型。
優點：所有瀏覽器都支持，支持 html、html4 和 html5。
缺點：不允許使用腳本。
2.2.3、iframe 嵌入：
使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>
src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。
優點：所有瀏覽器都支持，并允許使用腳本。
缺點：不推薦 html4 和 html 中使用，但 html5 支持。
2.2.4、html中嵌入：
svg 標簽直接插入 html 內容內，與其他標簽用法一致。
2.2.5、連接到svg文件：
使用 a 標簽，直接鏈接到 SVG 文件。
使用語法：<a href="line.svg">查看SVG</a>
3.1、線 - line
使用語法：
<svg width="300" height="300" >
<line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。
3.2、矩形 - rect
//使用語法：
<svg width="300" height="300" >
<rect
width="100" height="100" //大小設置
x="50" y="50" //可選 左上角位置，svg的左上角默認(0,0)
rx="20" ry="50" //可選 設置圓角
stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。
3.3、圓形 - circle
// 使用語法
<svg width="300" height="300" >
<circle
cx="100" cy="50" // 定義圓心 ，可選
r="40" // 圓的半徑
stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。
3.4、橢圓 - ellipse
橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。
// 使用語法
<svg width="300" height="300" >
<ellipse
rx="20" ry="100" //設置橢圓的x、y方向的半徑
fill="purple" // 橢圓填充色
cx="150" cy="150" //設置橢圓的圓心 ，可選參數
></ellipse>
</svg>上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。
3.5、折線 - polyline
// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
<!-- 繪制出一個默認填充黑色的三角形 -->
<polyline
points=" //點的集合
0 ,0, // 第一個點坐標
100,100, // 第二個點坐標
100,200 // 第三個點坐標
"
stroke="green"
></polyline>
<!-- 繪制一個臺階式的一條折線 -->
<polyline
points="0,0,50,0,50,50,100,50,100,100,150,100,150,150"
stroke="#4b27ff" fill="none"
></polyline>
</svg>上述代碼執行結果如圖所示：
需要注意的是 points 中包含了多個點的坐標，但不是一個數組。
3.6、多邊形 - polygon
polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。
// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
<polygon
points="
0,0, //多邊形的第一點
100,100, //多邊形的第二點
0,100 //多邊形的第三點
"
stroke="purple"
stroke-width="1"
fill="none"
></polygon>
</svg>polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。
3.7、路徑 - path
path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。
點個關注，下篇更精彩！
視覺內容常常能提升文檔、演示文稿和報告所要傳達的信息。在線辦公套件 ONLYOFFICE 支持一系列圖形對象和工具，助您創建引人入勝、細致周密的視覺效果，無論目標如何，總能吸引受眾。
本指南會帶您了解這些可用的功能，包括自選圖形、圖表、SmartArt、繪圖、圖片編輯、AI 生成的對象等有用的工具。掌握這些工具，即可提升文檔的視覺吸引力，有效傳達您的想法。
在展示概念、創建圖表，或向文檔添加視覺元素時，自選圖形頗有用武之地。可以在“插入”選項卡中找到自選圖形。
ONLYOFFICE 文檔中可用的形狀包括基本形狀、流程圖、箭頭、標注等。每個類別都包含一系列特定形狀，可自行選擇，用在文檔中。
添加形狀后，我們可以使用選擇手柄調整形狀大小、旋轉或移動形狀。您也可以通過更改填充顏色、漸變或圖片、線條顏色和線條樣式，來對形狀的外觀做自定義設置。這些都可以通過右側欄上可用的格式選項來實現。
還有一些功能，讓使用自選形狀更為輕松：用對齊網格可以精準對齊，還可以將形狀組合在一起，方便操作。
甚至可以通過對自選圖形指定宏，讓自選圖形可以實現交互。在文檔中點擊自選圖形、執行操作時，此設置會啟動所選腳本。
此外，還可以將任意對象保存為圖片，包括自選圖形、圖表等，這樣未來可以在其他文檔中重復使用。
您可以使用“插入”選項卡中的圖表，為統計信息、數字及趨勢增加視覺展現形式。ONLYOFFICE 中可用的圖表類型包括柱形圖、條形圖、折線圖和餅圖等諸多變體。
我們可以在電子表格中選擇要在圖表中展現的數據范圍，就其外觀做自定義設置，包括標題、標簽和圖例。還可以調整大小、重定位、更新和編輯圖表數據。
還可以就圖表中的每個元素，使用自動形狀設置分別做自定義設置。這樣，只要您有足夠的時間，就可以構建非常獨特、完全自定義的圖表，隨心設置填充和描邊參數。
通過 ONLYOFFICE 中集成的 Draw.io 服務，圖表構建可以易如反掌。您可以通過 ONLYOFFICE 文檔中的插件，使用 Draw.io 豐富的形狀和模板庫，輕松實現復雜想法、過程和工作流可視化；您可以根據自己的喜好添加和編輯這些形狀和模板：流程圖、思維導圖、組織結構圖、維恩圖、信息圖、網絡和架構圖、UML 關系圖等。
可以使用 SmartArt，創建更具視覺吸引力的圖表和圖形，提升文檔和演示文稿的效果。可以在“插入”選項卡中找到 SmartArt。
SmartArt 非常方便：不需要擁有完美的眼力或設計技能，也可以構建準確、合乎邏輯的方案。只要有想法，只需從多個可用預設中進行選擇即可：流程、循環、層次結構、關系、矩陣、棱錐圖等。每個類別都包含一系列特定的 SmartArt 圖形，可以結合自己的目的選用。
與自選圖形一樣，您還可以自定義和配置 SmartArt 項目，更改顏色、樣式和布局，對齊和分組對象等等。
從版本 7.4開始，ONLYOFFICE 增加了繪圖功能，可以使用筆或熒光筆工具創建自己的手繪草圖。如要使用此功能，請轉到新增的“繪圖”選項卡。在文本文檔、電子表格和演示文稿中也有這個選項卡。
繪圖時，可以選擇喜歡的顏色和線條粗細。為了讓顏色選擇更方便，我們在編輯器中加入了顏色名稱提示和取色器工具。取色器可以自動識別、在調色板中匹配到所需的顏色。
可以插入 BMP、GIF、JPEG、JPG 或 PNG 等常用格式的圖片，在文檔中對它們的位置、大小和對齊方式進行配置。
可以通過照片編輯器插件，用滑塊或數字輸入來調整圖片的亮度、對比度、飽和度和清晰度。還有更多選項，如裁剪、旋轉和翻轉圖片等。
可以對圖片應用各種濾鏡和效果：從一系列藝術濾鏡中選擇，如棕褐、灰度和油畫，也可以應用模糊、陽文等效果。
除編輯功能外，照片編輯器還支持在圖片中添加文本或形狀選項。您可以插入文本框、形狀或標注，通過選擇字體樣式、大小和顏色對它們的外觀做自定義設置。
您也可以讓 AI 為您工作。可以使用 AI 插件，要求人工智能插入一個對象的 HTML 代碼，如圖片或表格，給它一些提示，比如圖片或表格應該是什么樣子的。在正確的提示下，它可以在文檔中生成一個適合的對象。
此外，還可以讓它基于文本生成圖片。從版本 7.4 起，便可以在文本上下文菜單中看到這一功能。
如果文檔中有代碼，又不想讓它與文本的其余部分混起來，要讓代碼更為突出、更容易被識別出，可以使用“突出顯示代碼”插件。只需選擇代碼、選擇語言，這個插件就會自動將其格式設置為適合的字體和顏色。
我們可以使用在線辦公套件 | ONLYOFFICE 中一系列圖形對象，輕松創建具有視覺吸引力、富有感染力的文檔：自選圖形、圖表、SmartArt、手繪草圖、圖片編輯、AI 生成的對象和突出顯示代碼。而其集成的 Draw.io 和照片編輯器插件，還可助拓展更多創意可能。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
