個人實現截圖：
安裝：
npm install vue-esign --save
使用：
1.在main.js中引入
|
1
2
|
import vueEsign from
'vue-esign'
Vue.use(vueEsign)
|
2.在頁面中引用
|
1
2
3
4
5
|
<vue-esign ref=
"esign"
:width=
"800"
:height=
"300"
:isCrop=
"isCrop"
:lineWidth=
"lineWidth"
:lineColor=
"lineColor"
:bgColor.sync=
"bgColor"
/>
<button @click=
"handleReset"
>清空畫板</button>
<button @click=
"handleGenerate"
>生成圖片</button>
|
3.說明
| 屬性 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| width | Number | 800 | 畫布寬度，即導出圖片的寬度 |
| height | Number | 300 | 畫布高度，即導出圖片的高度 |
| lineWidth | 4 | Number | 畫筆粗細 |
| lineColor | String | #000000 | 畫筆顏色 |
| bgColor | String | 空 | 畫布背景色，為空時畫布背景透明， 支持多種格式 '#ccc'，'#E5A1A1'，'rgb(229, 161, 161)'，'rgba(0,0,0,.6)'，'red' |
| isCrop | Boolean | false | 是否裁剪，在畫布設定尺寸基礎上裁掉四周空白部分 |
期待已久,上原碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
data () {
return
{
lineWidth: 6,
lineColor:
'#000000'
,
bgColor:
''
,
resultImg:
''
,
isCrop:
false
}
},
methods: {
handleReset () {
this
.$refs[
'esign'
].reset()
//清空畫布
},
handleGenerate () {
this
.$refs[
'esign'
].generate().then(res => {
this
.resultImg = res
// 得到了簽字生成的base64圖片
}).
catch
(err => {
// 沒有簽名，點擊生成圖片時調用
this
.$message({
message: err +
' 未簽名！'
,
type:
'warning'
})
alert(err)
// 畫布沒有簽字時會執行這里 'Not Signned'
})
}
}
|
附：將base64轉化成圖片方法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
// 將base64，轉換成圖片
base64ImgtoFile(dataurl, filename =
'file'
) {
const arr = dataurl.split(
','
)
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split(
'/'
)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr =
new
Uint8Array(n)
while
(n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return
new
File([u8arr], `${filename}.${suffix}`, {
type: mime
})
},
|