美文网首页ionic2Ionic
ionic 3.X实现手写板签名

ionic 3.X实现手写板签名

作者: YuRi_1 | 来源:发表于2017-08-23 15:06 被阅读185次

一般店子里的手持设备会有手写签名,实现如下

1.下载组件

npm install angular2-signaturepad --save

2.引入配置使用

在所需的页面的module.ts文件引入组件(如下图),

Paste_Image.png

在页面的html里使用:
页面最下面的img标签用来保存base64图片

Paste_Image.png

在页面ts得到dom初始化配置,以及相关事件

Paste_Image.png

相关文章

网友评论

  • 探路者2050:请问下老师,这样用了签字板,在打包的时候会报错,碰到过吗? ionic cordova run android --prod --release, 报如下错:

    [09:27:03] typescript error
    Type SignForPcPage in E:/ionic3/lims-mobile-app/src/pages/sign-for-pc/sign-for-pc.ts is part of the
    declarations of 2 modules: AppModule in E:/ionic3/lims-mobile-app/src/app/app.module.ts and
    SignForPcPageModule in E:/ionic3/lims-mobile-app/src/pages/sign-for-pc/sign-for-pc.module.ts! Please
    consider moving SignForPcPage in E:/ionic3/lims-mobile-app/src/pages/sign-for-pc/sign-for-pc.ts to a higher
    module that imports AppModule in E:/ionic3/lims-mobile-app/src/app/app.module.ts and SignForPcPageModule in
    E:/ionic3/lims-mobile-app/src/pages/sign-for-pc/sign-for-pc.module.ts. You can also create a new NgModule
    that exports and includes SignForPcPage in E:/ionic3/lims-mobile-app/src/pages/sign-for-pc/sign-for-pc.ts
    then import that NgModule in AppModule in E:/ionic3/lims-mobile-app/src/app/app.module.ts and
    SignForPcPageModule in E:/ionic3/lims-mobile-app/src/pages/sign-for-pc/sign-for-pc.module.ts.

    Error: The Angular AoT build failed. See the issues above
    at E:\ionic3\lims-mobile-app\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:237:55
    at step (E:\ionic3\lims-mobile-app\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:32:23)
    at Object.next (E:\ionic3\lims-mobile-app\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:13:53)
    at fulfilled (E:\ionic3\lims-mobile-app\node_modules\@ionic\app-scripts\dist\aot\aot-compiler.js:4:58)
    at <anonymous>
  • 探路者2050:签完名后图片无法显示,请问老师,存储路径不对么
    YuRi_1:signatureImage赋值给一个img的 src,就可以展示了

本文标题:ionic 3.X实现手写板签名

本文链接:https://www.haomeiwen.com/subject/ymwddxtx.html