Vue_滑块拼图验证组件

效果

源码 https://github.com/linyisonger/Vue.Examples/tree/master/18.slider-verification

主要思路

当图片加载完成时，获取该图片的宽高，将后两个canvas的宽高重新赋值。 – 尺寸的自适应

将图片渲染到两个canvas上，背景canvas用来挖出拼图，前景canvas用来只保留拼图。

实现

• 随机图片
• 随机位置
• 自定义图片集合
• 自定义允许误差

主要代码

sliderVerification.vue

使用

main.ts

import Vue from 'vue'
import App from './App.vue'
import sliderVerification from './components/sliderVerification/index'
Vue.config.productionTip = false
Vue.use(sliderVerification)
new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue