版本

Vue2.x ： npm install vue-online-signature --save

Vue2.x gitee鏈接?https://gitee.com/awfifnypm/vue-online-signature

Vue3.x? npm install vue3-online-signature --save

Vue3.x gitee鏈接?https://gitee.com/awfifnypm/vue3-online-signature

功能

兼容 PC 和 Mobile；

屏幕旋轉自適應自定義畫布屏幕大小（屏幕旋轉后豎屏與橫屏數據互通）；

自定義畫布尺寸（尺寸可通過獲取id元素，幕屏尺寸，自定義寬高），畫筆粗細、顏色，畫布背景色；

支持裁剪 （針對需求：有的簽字需要裁剪掉四周空白）。

自定義導出圖旋轉角度

自定義畫布背景（支持圖片及圖片背景重復）

自定義導出圖背景（支持圖片及圖片背景重復，可生成與畫布背景不一樣背景的圖片）

初始化布畫恢復歷史繪制數據或在已經的畫布上恢復歷史繪制數據

導出圖片格式為?base64；?示例demo

注： 本組件是基于vue-esign插件基礎上進行二開和修改，使用方法與vue-esign插件有差異，建議查看本插件文檔

安裝

npminstall vue-online-signature--save

使用

引入 組件

import vueSignature from 'vue-online-signature'

頁面中使用?必須設置?ref?，用來調用組件內暴露的內置方法?reset()?和?confirm()

自定義的寬度超出屏幕寬度的話，組件樣式寬度則是父元素的100%；

組件所有參數都非必填，組件emit出部份內置方法，具體查看下面說明文檔

<vueSignatureref="vueSignatureRef"v-bind="params"/>
<button@click="handleReset">清空畫板</button>
<button@click="handleGenerate">生成圖片</button>

data(){
? ? return{
? ? ? ? ? ?resultImg:'',
? ? ? ? ? ? params:{
? ? ? ? ? ? ? ? ?width:0,
? ? ? ? ? ? ? ? ?height:0,
? ? ? ? ? ? ? ? ?lineWidth:5,
? ? ? ? ? ? ? ? ?lineColor:'',
? ? ? ? ? ? ? ? ?canvasBack:'',
? ? ? ? ? ? ? ? ?isCrop:false,
? ? ? ? ? ? ? ? ?edg:0,
? ? ? ? ? ? ? ? ?fullScreen:false,
? ? ? ? ? ? ? ? ?domId:'',
? ? ? ? ? ? ? ? ?imgBack:'',
? ? ? ? ? ? ? ? ?isRepeat:'',
? ? ? ? ? ? ? ? ?noRotation:false,
? ? ? ? ? ? ? ? ?backIsCenter:false
? ? ? ? ? ? }
? ? ? }
}
methods:{
? ? ?handleReset(){
? ? ?? ? ?this.$refs.vueSignatureRef.reset()
? ? ?},
? ? ?handleGenerate(){
? ? ?? ? ?this.$refs.vueSignatureRef.confirm()
? ? ?? ? ?.then(res=>{
? ? ?? ? ?? ? ?this.resultImg=res
? ? ?? ? ?})
? ? ?? ? ?.catch(err=>{
? ? ?? ? ?? ? ?alert(err)
? ? ?? ? ?? ? ?// 畫布沒有簽字時會執行這里 'Not Signned'
? ? ?? ? ?})
? ? ?}
}

說明
詳情文檔請查看git倉庫README.md文檔