效果
需求
在一些項(xiàng)目業(yè)務(wù)中，經(jīng)常會(huì)使用到畫板，讓用戶自己去寫/畫一些東西做標(biāo)示，比如說(shuō)在線簽電子合約、簽名等，在上兩篇博客中，已經(jīng)解決了PC端和移動(dòng)端的Canvas簽名，那么在簽名完成之后，我們?nèi)绾螌嫴忌蠔|西保存，或者清空呢？ 【本篇包含PC和移動(dòng)端的簽名，以及清空和保存】
分析
在前兩篇中，分辨實(shí)現(xiàn)了 PC端canvas簽名以及 移動(dòng)端canvas簽名，要是形成一個(gè)簡(jiǎn)單且完整的功能點(diǎn)，我們起碼還缺少清空和保存兩個(gè)環(huán)節(jié)。接下來(lái)分析一下。
1. 清空
就是將此前所畫的所有筆畫清除掉，方法則是清空存放點(diǎn)集合的數(shù)組重新設(shè)置畫布寬高即可。另外一個(gè)方法，也可以使用 clearRect()，這個(gè)方法是清空畫布中一個(gè)矩形區(qū)域內(nèi)的內(nèi)容。由于我們并為保存所有點(diǎn)集合，所以采用此方法清空。
1.1 關(guān)于clearRect
// clearRect() 方法清空給定矩形內(nèi)的指定像素。
context.clearRect(x,y,width,height);
| 參數(shù) | 描述 | 舉例(全部清空) |
|---|---|---|
| x | 要清除的矩形左上角的 x 坐標(biāo) | 0 |
| y | 要清除的矩形左上角的 y 坐標(biāo) | 0 |
| width | 要清除的矩形的寬度，以像素計(jì) | context.width |
| height | 要清除的矩形的高度，以像素計(jì) | context.height |
1.2 代碼示例
<el-button type="danger" @click="cleanCanvas">
清空
</el-button>
mounted () {
let board = this.$refs.board; // 獲取DOM
this.width = board.width = this.$refs.boardBox.offsetWidth; // 設(shè)置畫布寬
this.height = board.height = this.$refs.boardBox.offsetHeight; // 設(shè)置畫布高
... // something codes
}
// 清空畫布
cleanCanvas () {
// clearRect() 方法清空給定矩形內(nèi)的指定像素。
this.ctx.clearRect(
0,
0,
this.width,
this.height
)
},
2. 保存
保存，需求簡(jiǎn)單明了，就是將canvas輸出為一張圖片。處理也簡(jiǎn)單粗暴，直接將此區(qū)域輸出為一張base64的圖片即可。方法是使用原生方法toDataURL()
2.1 關(guān)于toDataURL
HTMLCanvasElement.toDataURL() 方法返回一個(gè)包含圖片展示的 data URI ?？梢允褂?type 參數(shù)其類型，默認(rèn)為 PNG 格式。圖片的分辨率為96dpi。
- 如果畫布的高度或?qū)挾仁?，那么會(huì)返回字符串“data:,”。
- 如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開(kāi)頭，那么該傳入的類型是不支持的。
- Chrome支持“image/webp”類型。
方法
canvas.toDataURL(type, encoderOptions);
參數(shù)
- type 可選
圖片格式，默認(rèn)為 image/png - encoderOptions 可選
圖片質(zhì)量。取值范圍為 0 到 1 。如果指定圖片格式為 image/jpeg 或 image/webp。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略。
返回值
包含 data URI 的DOMString。
2.2 代碼示例
<el-button type="success" @click="saveCanvas">
保存
</el-button>
<div>
<img :src="base64" alt="">
</div>
data() {
return {
base64: '',
}
}
// 保存簽名
saveCanvas () {
this.base64 = this.$refs.board.toDataURL(); // 轉(zhuǎn)為base64
}
結(jié)語(yǔ)
關(guān)于canvas簽名的基本到這里就結(jié)束了，項(xiàng)目如果有遇到更復(fù)雜的再繼續(xù)更新。目前更新的有
- PC端簽名方法
- 移動(dòng)端簽名方法
- PC和移動(dòng)端簽名方法以及清空和保存
想了解本期源碼的可以關(guān)注下公眾號(hào)流眸回復(fù)canvas或者簽名獲取哦～
