效果
需求
在一些項目業(yè)務中撮竿，經(jīng)常會使用到畫板纤泵，讓用戶自己去寫/畫一些東西做標示骆姐，比如說在線簽電子合約镜粤、簽名等，在上兩篇博客中玻褪，已經(jīng)解決了PC端和移動端的Canvas簽名肉渴，那么在簽名完成之后，我們?nèi)绾螌嫴忌蠔|西保存带射，或者清空呢同规？ 【本篇包含PC和移動端的簽名，以及清空和保存】
分析
在前兩篇中窟社，分辨實現(xiàn)了 PC端canvas簽名以及 移動端canvas簽名券勺，要是形成一個簡單且完整的功能點，我們起碼還缺少清空和保存兩個環(huán)節(jié)灿里。接下來分析一下关炼。
1. 清空
就是將此前所畫的所有筆畫清除掉，方法則是清空存放點集合的數(shù)組重新設置畫布寬高即可匣吊。另外一個方法盗扒，也可以使用 clearRect()，這個方法是清空畫布中一個矩形區(qū)域內(nèi)的內(nèi)容缀去。由于我們并為保存所有點集合，所以采用此方法清空甸祭。
1.1 關于clearRect
// clearRect() 方法清空給定矩形內(nèi)的指定像素缕碎。
context.clearRect(x,y,width,height);
| 參數(shù) | 描述 | 舉例(全部清空) |
|---|---|---|
| x | 要清除的矩形左上角的 x 坐標 | 0 |
| y | 要清除的矩形左上角的 y 坐標 | 0 |
| width | 要清除的矩形的寬度，以像素計 | context.width |
| height | 要清除的矩形的高度池户，以像素計 | 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; // 設置畫布寬
this.height = board.height = this.$refs.boardBox.offsetHeight; // 設置畫布高
... // something codes
}
// 清空畫布
cleanCanvas () {
// clearRect() 方法清空給定矩形內(nèi)的指定像素咏雌。
this.ctx.clearRect(
0,
0,
this.width,
this.height
)
},
2. 保存
保存，需求簡單明了校焦，就是將canvas輸出為一張圖片赊抖。處理也簡單粗暴，直接將此區(qū)域輸出為一張base64的圖片即可寨典。方法是使用原生方法toDataURL()
2.1 關于toDataURL
HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI 氛雪。可以使用 type 參數(shù)其類型耸成，默認為 PNG 格式报亩。圖片的分辨率為96dpi。
- 如果畫布的高度或?qū)挾仁?井氢，那么會返回字符串“data:,”弦追。
- 如果傳入的類型非“image/png”，但是返回的值以“data:image/png”開頭花竞，那么該傳入的類型是不支持的劲件。
- Chrome支持“image/webp”類型。
方法
canvas.toDataURL(type, encoderOptions);
參數(shù)
- type 可選
圖片格式，默認為 image/png - encoderOptions 可選
圖片質(zhì)量零远。取值范圍為 0 到 1 苗分。如果指定圖片格式為 image/jpeg 或 image/webp。如果超出取值范圍遍烦，將會使用默認值 0.92俭嘁。其他參數(shù)會被忽略。
返回值
包含 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é)語
關于canvas簽名的基本到這里就結(jié)束了供填，項目如果有遇到更復雜的再繼續(xù)更新。目前更新的有
- PC端簽名方法
- 移動端簽名方法
- PC和移動端簽名方法以及清空和保存
想了解本期源碼的可以關注下公眾號流眸回復canvas或者簽名獲取哦～
