RVerify.js

✅❎ A lightweight image rotation verification plugin.

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: A 152*152 px image needs to be set at least.

Contributors

This project exists thanks to all the people who contribute.

License

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