ログイン ページのグラフィック キャプチャ プラグイン

identify は、キャンバスを使用してグラフィック検証コードを生成するvue プラグインです。

npm 識別 --save

グローバルにインポートできます

   
   
    
    
'./components/page/identify'からSIdentifyをインポートします。
ビュー 。使用(SIdentify)
   
   
    
    

現地輸入も可能、本稿では現地紹介を利用 

 

実装されたコードは次のとおりです。

サブアセンブリ

   
   
    
    
< テンプレート>
< divクラス= "s-キャンバス" >
< キャンバス id = "s-canvas" :width = "contentWidth" :height = "contentHeight" > < /キャンバス>
< / div >
< / テンプレート>
< スクリプト>
デフォルトの エクスポート{
名前 : 'SIdentify' ,
小道具 : {
識別コード: {
タイプ :文字列、
デフォルト : '1234'
}、
fontSizeMin: {
タイプ :数値,
デフォルト : 18
}、
fontSizeMax: {
タイプ :数値,
デフォルト : 40
}、
backgroundColorMin: {
タイプ :数値,
デフォルト : 180
}、
backgroundColorMax: {
タイプ :数値,
デフォルト : 240
}、
colorMin: {
タイプ :数値,
デフォルト : 50
}、
カラーマックス: {
タイプ :数値,
デフォルト : 160
}、
lineColorMin: {
タイプ :数値,
デフォルト : 40
}、
lineColorMax: {
タイプ :数値,
デフォルト : 180
}、
dotColorMin: {
タイプ :数値,
デフォルト : 0
}、
dotColorMax: {
タイプ :数値,
デフォルト : 255
}、
contentWidth: {
タイプ :数値,
デフォルト : 111
}、
コンテンツの高さ: {
タイプ :数値,
デフォルト : 38
}
}、
私の やり方: {
// 乱数 を生成する
randomNum(最小、最大) {
return Math.floor(Math.random ( ) * (最大-最小) +最小)
}、
// ランダムな 色を生成
randomColor(最小、最大) {
let r = this.randomNum(min, max)
g = this.randomNum(最小、最大)
let b = this.randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
}、
drawPic() {
let canvas = document.getElementById( 's-canvas' )
let ctx = canvas.getContext( '2d' )
ctx.textBaseline = '下部'
// 背景 を描く
ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx.fillRect( 0 , 0 , this.contentWidth, this.contentHeight)
// テキスト を描画
for (let i = 0 ; i < this.identifyCode. length ; i + + ) {
this.drawText(ctx, this.identifyCode[i], i)
}
// this.drawLine (ctx) //干渉線を描画
// this.drawDot (ctx) //干渉点を描画
}、
// テキスト を描画する
drawText(ctx, txt, i) {
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
let x = (i + 1 ) * (this.contentWidth / (this.identifyCode. length + 1 ))
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5 )
var deg = this.randomNum(- 30 , 30 ) //キャラクターの回転角度 ( 45度以下が良い)
//座標原点 と 回転角度を修正
ctx.translate(x, y)
ctx.rotate(deg * Math.PI / 180 )
ctx.fillText(txt, 0 , 0 )
//座標原点 と 回転角度を復元
ctx.rotate(-deg * Math.PI / 180 )
ctx.translate(-x, -y)
}、
drawLine(ctx) {
// 干渉 線を引く
for (let i = 0 ; i < 8 ; i + + ) {
ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
ctx.beginPath()
ctx.moveTo(this.randomNum( 0 , this.contentWidth), this.randomNum( 0 , this.contentHeight))
ctx.lineTo(this.randomNum( 0 , this.contentWidth), this.randomNum( 0 , this.contentHeight))
ctx.ストローク()
}
}、
drawDot(ctx) {
// 干渉 点を描く
for (let i = 0 ; i < 100 ; i + + ) {
ctx.fillStyle = this.randomColor( 0 , 255 )
ctx.beginPath()
ctx.arc(this.randomNum( 0 , this.contentWidth), this.randomNum( 0 , this.contentHeight), 1 , 0 , 2 * Math.PI)
ctx.fill()
}
}
}、
見る : {
識別コード() {
this.drawPic()
}
}、
モウンテッド () {
this.drawPic()
}
}
< / スクリプト>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

親コンポーネント

   
   
    
    
< テンプレート>
< 分割>
<div> キャプチャテスト</div> _ _ _ _
< div @click = "refreshCode()" class = "code" style = "cursor:pointer;" title = "クリックして確認コードを切り替える" >
< s-identify :identifyCode = "identifyCode" > < / s-identify >
< / div >
< / div >
< / テンプレート>
< スクリプト>
import { defineComponent } from 'vue' ;
"../../src/components/Sidentify.vue"からsIdentify をインポートします。
// 'axios'からaxios を インポート
デフォルト の defineComponent({
名前 ：「リスト」、
コンポーネント : { sIdentify },
データ () {
戻る {
識別コード: "" ,
IdentifyCodes: [ '0' , '1' , '2' , '3' , ' 4' , '5' , '6' , '7' , '8' , '9' , 'a' , 'b' , 'c' , 'd' ], //実際の必要に応じて必要な文字を追加します
}
}、
マウント された() {
番目は .refreshCode() です
}、
マウントされていない() {

}、
メソッド : {
// 乱数 を生成
ランダム 数(最小、最大) {
最大=最大+ 1
return Math.floor(Math.random ( ) * (max - min) + min);
}、
// 確認コード を更新
re freshCode() {
this.identifyCode = "" ;
this.makeCode(this.identifyCodes, 4 );
console.log( '現在の確認コード:' ,this.identifyCode);
}、
// 検証 コード文字列をランダムに生成
makeCode (データ, レン) {
console.log( 「データ、長さ:」、データ、長さ)
for (let i = 0 ; i < len; i + + ) {
this.identifyCode + = this.identifyCodes[this.randomNum( 0 , this.identifyCodes. length - 1 )]
}
}、
}、
});
< / スクリプト>
< style lang = "less"スコープ>
. コード{
幅: 500ピクセル;
高さ: 31.25レム;
ボーダー: 1 px ソリッド #ddd;
}
< / スタイル>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

レンダリング

 

 

 

 

 

identify は、キャンバスを使用してグラフィック検証コードを生成するvue プラグインです。

npm 識別 --save

グローバルにインポートできます

   
   
  
  
'./components/page/identify'からSIdentifyをインポートします。
ビュー 。使用(SIdentify)
   
   
  
  

現地輸入も可能、本稿では現地紹介を利用 

 

実装されたコードは次のとおりです。

サブアセンブリ

   
   
  
  
< テンプレート>
< divクラス= "s-キャンバス" >
< キャンバス id = "s-canvas" :width = "contentWidth" :height = "contentHeight" > < /キャンバス>
< / div >
< / テンプレート>
< スクリプト>
デフォルトの エクスポート{
名前 : 'SIdentify' ,
小道具 : {
識別コード: {
タイプ :文字列、
デフォルト : '1234'
}、
fontSizeMin: {
タイプ :数値,
デフォルト : 18
}、
fontSizeMax: {
タイプ :数値,
デフォルト : 40
}、
backgroundColorMin: {
タイプ :数値,
デフォルト : 180
}、
backgroundColorMax: {
タイプ :数値,
デフォルト : 240
}、
colorMin: {
タイプ :数値,
デフォルト : 50
}、
カラーマックス: {
タイプ :数値,
デフォルト : 160
}、
lineColorMin: {
タイプ :数値,
デフォルト : 40
}、
lineColorMax: {
タイプ :数値,
デフォルト : 180
}、
dotColorMin: {
タイプ :数値,
デフォルト : 0
}、
dotColorMax: {
タイプ :数値,
デフォルト : 255
}、
contentWidth: {
タイプ :数値,
デフォルト : 111
}、
コンテンツの高さ: {
タイプ :数値,
デフォルト : 38
}
}、
私の やり方: {
// 乱数 を生成する
randomNum(最小、最大) {
return Math.floor(Math.random ( ) * (最大-最小) +最小)
}、
// ランダムな 色を生成
randomColor(最小、最大) {
let r = this.randomNum(min, max)
g = this.randomNum(最小、最大)
let b = this.randomNum(min, max)
return 'rgb(' + r + ',' + g + ',' + b + ')'
}、
drawPic() {
let canvas = document.getElementById( 's-canvas' )
let ctx = canvas.getContext( '2d' )
ctx.textBaseline = '下部'
// 背景 を描く
ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
ctx.fillRect( 0 , 0 , this.contentWidth, this.contentHeight)
// テキスト を描画
for (let i = 0 ; i < this.identifyCode. length ; i + + ) {
this.drawText(ctx, this.identifyCode[i], i)
}
// this.drawLine (ctx) //干渉線を描画
// this.drawDot (ctx) //干渉点を描画
}、
// テキスト を描画する
drawText(ctx, txt, i) {
ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
let x = (i + 1 ) * (this.contentWidth / (this.identifyCode. length + 1 ))
let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5 )
var deg = this.randomNum(- 30 , 30 ) //キャラクターの回転角度 ( 45度以下が良い)
//座標原点 と 回転角度を修正
ctx.translate(x, y)
ctx.rotate(deg * Math.PI / 180 )
ctx.fillText(txt, 0 , 0 )
//座標原点 と 回転角度を復元
ctx.rotate(-deg * Math.PI / 180 )
ctx.translate(-x, -y)
}、
drawLine(ctx) {
// 干渉 線を引く
for (let i = 0 ; i < 8 ; i + + ) {
ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
ctx.beginPath()
ctx.moveTo(this.randomNum( 0 , this.contentWidth), this.randomNum( 0 , this.contentHeight))
ctx.lineTo(this.randomNum( 0 , this.contentWidth), this.randomNum( 0 , this.contentHeight))
ctx.ストローク()
}
}、
drawDot(ctx) {
// 干渉 点を描く
for (let i = 0 ; i < 100 ; i + + ) {
ctx.fillStyle = this.randomColor( 0 , 255 )
ctx.beginPath()
ctx.arc(this.randomNum( 0 , this.contentWidth), this.randomNum( 0 , this.contentHeight), 1 , 0 , 2 * Math.PI)
ctx.fill()
}
}
}、
見る : {
識別コード() {
this.drawPic()
}
}、
モウンテッド () {
this.drawPic()
}
}
< / スクリプト>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

親コンポーネント

   
   
  
  
< テンプレート>
< 分割>
<div> キャプチャテスト</div> _ _ _ _
< div @click = "refreshCode()" class = "code" style = "cursor:pointer;" title = "クリックして確認コードを切り替える" >
< s-identify :identifyCode = "identifyCode" > < / s-identify >
< / div >
< / div >
< / テンプレート>
< スクリプト>
import { defineComponent } from 'vue' ;
"../../src/components/Sidentify.vue"からsIdentify をインポートします。
// 'axios'からaxios を インポート
デフォルト の defineComponent({
名前 ：「リスト」、
コンポーネント : { sIdentify },
データ () {
戻る {
識別コード: "" ,
IdentifyCodes: [ '0' , '1' , '2' , '3' , ' 4' , '5' , '6' , '7' , '8' , '9' , 'a' , 'b' , 'c' , 'd' ], //実際の必要に応じて必要な文字を追加します
}
}、
マウント された() {
番目は .refreshCode() です
}、
マウントされていない() {

}、
メソッド : {
// 乱数 を生成
ランダム 数(最小、最大) {
最大=最大+ 1
return Math.floor(Math.random ( ) * (max - min) + min);
}、
// 確認コード を更新
re freshCode() {
this.identifyCode = "" ;
this.makeCode(this.identifyCodes, 4 );
console.log( '現在の確認コード:' ,this.identifyCode);
}、
// 検証 コード文字列をランダムに生成
makeCode (データ, レン) {
console.log( 「データ、長さ:」、データ、長さ)
for (let i = 0 ; i < len; i + + ) {
this.identifyCode + = this.identifyCodes[this.randomNum( 0 , this.identifyCodes. length - 1 )]
}
}、
}、
});
< / スクリプト>
< style lang = "less"スコープ>
. コード{
幅: 500ピクセル;
高さ: 31.25レム;
ボーダー: 1 px ソリッド #ddd;
}
< / スタイル>
   
   
  
  

    
    
   
   
   
   
  
  
   
   
  
  

レンダリング