签名绘画板网页js插件

签名绘画板网页js插件源码下载

看看谁在用

查看文件结构

文件大小:0.01M

资源分类: 插件-其它前端代码

更新时间: 2021-05-27

一个纯JavaScript实现的签名板,允许用户在HTML画布元素画出平滑的签名和导出签名PNG / JPG / SVG图像。完全适合在移动和桌面设备上。

初始化签名板和定义一个背景。可以使用一个不透明的颜色在保存JPEG的形象。这个选项可以省略如果保存为PNG或SVG。
var canvas = document.querySelector("canvas");
var signaturePad = new SignaturePad(canvas, {
    backgroundColor: 'rgb(255, 255, 255)'
});
保存文件
// PNG
signaturePad.toDataURL(); 

// JPG
signaturePad.toDataURL("image/jpeg");

// SVG
signaturePad.toDataURL("image/svg+xml");
还可以从图片URL数据里
signaturePad.fromDataURL("data:image/png;base64,...");
一些常用的API
// returns an array of point groups
const data = signaturePad.toData();

// draws a signature image from an array of point groups
signaturePad.fromData(data);

// clears the signature
signaturePad.clear();

// returns true if canvas is empty
signaturePad.isEmpty();

// binds/unbinds event handlers
signaturePad.on();
signaturePad.off();
自定义签名板的参数
var signaturePad = new SignaturePad(canvas, {

    // 线条最小大嘴宽度
    minWidth: 0.5,
    maxWidth:  2.5,

    // 用来修改新的速度基于前面的速度
    velocityFilterWeight: 0.7,

    // 画下一个点最多一次每x毫秒
    throttle: 16,

    // 背景色
    backgroundColor: 'rgba(0,0,0,0)',

    // 最小距离
    minDistance: 5,

    // 线条宽度
    dotSize: 2,

    // 线条颜色
    penColor: 'black'
    
});
回调方法
var signaturePad = new SignaturePad(canvas, {

    onBegin: function(){
      // do something
    }
    
    onEnd: function(){
      // do something
    }

});

签名绘画板网页js插件

正在加载文件目录...

也许你还喜欢

  1. canvas彩色丝带涂鸦动画特效
  2. jQuery+canvas绘画板工具
  3. jquery+canvas连线题插件
  4. css光标样式大全代码
  5. jquery创意动态气泡显示百分比
  6. 天津地图echarts+jquery代码
网页右键菜单多级js插件
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2