Wondering what’s next for npm?Check out our public roadmap! »

    rverify

    0.1.2 • Public • Published

    RVerify.js

    A lightweight image rotation verification plugin.

    Build Downloads Version License

    Installation

    Add RVerify.js and RVerify.css to your project.

    <script src="RVerify.js"></script>
    <link rel="stylesheet" href="RVerify.css"/>

    You can get the corresponding CDN link from unpkg or jsdelivr.

    RVerify.js is available via npm.

    npm install --save rverify

    Basic usage

    Simply call action() to activate the verification modal.

    RVerify.action(function(res){
      console.log(res);
    });

    res will return 3 different codes:

    • 0: Verify failed.
    • 1: Verify successful.
    • 2: No action.(Return the code when the modal is closed before it successfully verified.)

    Configuration

    You can configure some parameters through RVerify.configure({}).

    mask

    Type: Number
    Default: 0.5

    Set the mask transparency.

    RVerify.configure({
      mask: 0.5
    })

    maskClosable

    Type: Boolean
    Default: false

    Set whether click the mask can be closed.

    RVerify.configure({
      maskClosable: true
    })

    closeIcon

    Type: String
    Default: (SVG CODE)

    Set the modal close icon.

    RVerify.configure({
      closeIcon: '(Please copy the SVG code)'
    })

    NOTE: It's recommended to set the SVG icon width and height to 20px.

    sliderIcon

    Type: String
    Default: (SVG CODE)

    Set the modal slider icon.

    RVerify.configure({
      sliderIcon: '(Please copy the SVG code)'
    })

    NOTE: It's recommended to set the SVG icon width and height to 20px.

    extraIcon

    Type: String
    Default: (SVG CODE)

    Set the modal extra icon.

    RVerify.configure({
      extraIcon: '(Please copy the SVG code)'
    })

    NOTE: It's recommended to set the SVG icon width and height to 15px.

    tolerance

    Type: Number
    Default: 10

    Set the verification tolerance range.(Range: 5°~45°)

    RVerify.configure({
      tolerance: 10
    })

    NOTE: In order to ensure a friendly verification effect, its value ranges from 5° to 45°.

    duration

    Type: Number
    Default: 500

    Set the modal delay closing time.(Unit: ms)

    RVerify.configure({
      duration: 1000
    })

    title

    Type: String
    Default: 身份验证

    Set the modal title.

    RVerify.configure({
      title: 'Authentication'
    })

    text

    Type: String
    Default: 拖动滑块,使图片角度为正

    Set the modal text.

    RVerify.configure({
      text: 'Drag the slider to make the image angle positive.'
    })

    extra

    Type: String
    Default: null

    Set extra features at the bottom of the modal.

    RVerify.configure({
      extra: 'View on Npm'
    })

    extraColor

    Type: String
    Default: #4E6EF2

    Set extra features text color at the bottom of the modal.

    RVerify.configure({
      extraColor: '#1ca280'
    })

    extraLink

    Type: String
    Default: https://github.com/zpfz

    Set extra features link at the bottom of the modal.

    RVerify.configure({
      extraLink: 'https://www.npmjs.com/package/rverify'
    })

    zIndex

    Type: Number
    Default: 9999

    Set the modal z-index.

    RVerify.configure({
      zIndex: 1000
    })

    album

    Type: Array
    Default: []

    Set the modal randomly displayed image album.

    RVerify.configure({
      album: [
        'https://rverify.vercel.app/assets/1.jpg',
        'https://rverify.vercel.app/assets/2.jpg',
        'https://rverify.vercel.app/assets/3.jpg',
        'https://rverify.vercel.app/assets/4.jpg',
        'https://rverify.vercel.app/assets/5.jpg',
        'https://rverify.vercel.app/assets/6.jpg',
        'https://rverify.vercel.app/assets/7.jpg',
        'https://rverify.vercel.app/assets/8.jpg',
        'https://rverify.vercel.app/assets/9.jpg',
        'https://rverify.vercel.app/assets/10.jpg'
      ]
    })

    NOTE: An image needs to be set at least.

    Contributors

    This project exists thanks to all the people who contribute.

    Feng L.H. Guojun Chen WampyCakes

    License

    RVerify © 2020-present, Feng L.H. Released under the MIT License.

    Install

    npm i rverify

    DownloadsWeekly Downloads

    38

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    50.5 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar