2. 程式人生 > >vue2.0實現引用qrcode.js實現獲取改變二維碼的樣式

vue2.0實現引用qrcode.js實現獲取改變二維碼的樣式

阿新 • • 發佈：2019-01-27 
/**
 * @fileoverview
 * - Using the 'QRCode for Javascript library'
 * - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
 * - this library has no dependencies.
 *
 * @author davidshimjs
 * @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>

 
 * @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
 */
!(function () {
//---------------------------------------------------------------------
// QRCode for JavaScript
//
// Copyright (c) 2009 Kazuhiko Arase
//
// URL: http://www.d-project.com/

 
//
// Licensed under the MIT license:
//   http://www.opensource.org/licenses/mit-license.php
//
// The word "QR Code" is registered trademark of
// DENSO WAVE INCORPORATED
//   http://www.denso-wave.com/qrcode/faqpatent-e.html
//
//---------------------------------------------------------------------
function QR8bitByte(data) {
        this
 
.mode = QRMode.MODE_8BIT_BYTE;
this.data = data;
this.parsedData = [];
// Added to support UTF-8 Characters
for (var i = 0, l = this.data.length; i < l; i++) {
            var byteArray = [];
var code = this.data.charCodeAt(i);
if (code > 0x10000) {
                byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
byteArray[3] = 0x80 | (code & 0x3F);
} else if (code > 0x800) {
                byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
byteArray[2] = 0x80 | (code & 0x3F);
} else if (code > 0x80) {
                byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
byteArray[1] = 0x80 | (code & 0x3F);
} else {
                byteArray[0] = code;
}

            this.parsedData.push(byteArray);
}

        this.parsedData = Array.prototype.concat.apply([], this.parsedData);
if (this.parsedData.length != this.data.length) {
            this.parsedData.unshift(191);
this.parsedData.unshift(187);
this.parsedData.unshift(239);
}
    }

    QR8bitByte.prototype = {
        getLength: function (buffer) {
            return this.parsedData.length;
},
write: function (buffer) {
            for (var i = 0, l = this.parsedData.length; i < l; i++) {
                buffer.put(this.parsedData[i], 8);
}
        }
    };
function QRCodeModel(typeNumber, errorCorrectLevel) {
        this.typeNumber = typeNumber;
this.errorCorrectLevel = errorCorrectLevel;
this.modules = null;
this.moduleCount = 0;
this.dataCache = null;
this.dataList = [];
}

    QRCodeModel.prototype={addData:function(data){var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){throw new Error(row+","+col);}
        return this.modules[row][col];},getModuleCount:function(){return this.moduleCount;},make:function(){this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row<this.moduleCount;row++){this.modules[row]=new Array(this.moduleCount);for(var col=0;col<this.moduleCount;col++){this.modules[row][col]=null;}}
        this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(test,maskPattern);if(this.typeNumber>=7){this.setupTypeNumber(test);}
        if(this.dataCache==null){this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);}
        this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){for(var r=-1;r<=7;r++){if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){minLostPoint=lostPoint;pattern=i;}}
        return pattern;},createMovieClip:function(target_mc,instance_name,depth){var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row<this.modules.length;row++){var y=row*cs;for(var col=0;col<this.modules[row].length;col++){var x=col*cs;var dark=this.modules[row][col];if(dark){qr_mc.beginFill(0,100);qr_mc.moveTo(x,y);qr_mc.lineTo(x+cs,y);qr_mc.lineTo(x+cs,y+cs);qr_mc.lineTo(x,y+cs);qr_mc.endFill();}}}
        return qr_mc;},setupTimingPattern:function(){for(var r=8;r<this.moduleCount-8;r++){if(this.modules[r][6]!=null){continue;}
        this.modules[r][6]=(r%2==0);}
        for(var c=8;c<this.moduleCount-8;c++){if(this.modules[6][c]!=null){continue;}
            this.modules[6][c]=(c%2==0);}},setupPositionAdjustPattern:function(){var pos=QRUtil.getPatternPosition(this.typeNumber);for(var i=0;i<pos.length;i++){for(var j=0;j<pos.length;j++){var row=pos[i];var col=pos[j];if(this.modules[row][col]!=null){continue;}
        for(var r=-2;r<=2;r++){for(var c=-2;c<=2;c++){if(r==-2||r==2||c==-2||c==2||(r==0&&c==0)){this.modules[row+r][col+c]=true;}else{this.modules[row+r][col+c]=false;}}}}}},setupTypeNumber:function(test){var bits=QRUtil.getBCHTypeNumber(this.typeNumber);for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;}
        for(var i=0;i<18;i++){var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<6){this.modules[i][8]=mod;}else if(i<8){this.modules[i+1][8]=mod;}else{this.modules[this.moduleCount-15+i][8]=mod;}}
        for(var i=0;i<15;i++){var mod=(!test&&((bits>>i)&1)==1);if(i<8){this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){this.modules[8][15-i-1+1]=mod;}else{this.modules[8][15-i-1]=mod;}}
        this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){if(col==6)col--;while(true){for(var c=0;c<2;c++){if(this.modules[row][col-c]==null){var dark=false;if(byteIndex<data.length){dark=(((data[byteIndex]>>>bitIndex)&1)==1);}
        var mask=QRUtil.getMask(maskPattern,row,col-c);if(mask){dark=!dark;}
        this.modules[row][col-c]=dark;bitIndex--;if(bitIndex==-1){byteIndex++;bitIndex=7;}}}
        row+=inc;if(row<0||this.moduleCount<=row){row-=inc;inc=-inc;break;}}}}};QRCodeModel.PAD0=0xEC;QRCodeModel.PAD1=0x11;QRCodeModel.createData=function(typeNumber,errorCorrectLevel,dataList){var rsBlocks=QRRSBlock.getRSBlocks(typeNumber,errorCorrectLevel);var buffer=new QRBitBuffer();for(var i=0;i<dataList.length;i++){var data=dataList[i];buffer.put(data.mode,4);buffer.put(data.getLength(),QRUtil.getLengthInBits(data.mode,typeNumber));data.write(buffer);}
        var totalDataCount=0;for(var i=0;i<rsBlocks.length;i++){totalDataCount+=rsBlocks[i].dataCount;}
        if(buffer.getLengthInBits()>totalDataCount*8){throw new Error("code length overflow. ("
+buffer.getLengthInBits()
            +">"
+totalDataCount*8
+")");}
        if(buffer.getLengthInBits()+4<=totalDataCount*8){buffer.put(0,4);}
        while(buffer.getLengthInBits()%8!=0){buffer.putBit(false);}
        while(true){if(buffer.getLengthInBits()>=totalDataCount*8){break;}
            buffer.put(QRCodeModel.PAD0,8);if(buffer.getLengthInBits()>=totalDataCount*8){break;}
            buffer.put(QRCodeModel.PAD1,8);}
        return QRCodeModel.createBytes(buffer,rsBlocks);};QRCodeModel.createBytes=function(buffer,rsBlocks){var offset=0;var maxDcCount=0;var maxEcCount=0;var dcdata=new Array(rsBlocks.length);var ecdata=new Array(rsBlocks.length);for(var r=0;r<rsBlocks.length;r++){var dcCount=rsBlocks[r].dataCount;var ecCount=rsBlocks[r].totalCount-dcCount;maxDcCount=Math.max(maxDcCount,dcCount);maxEcCount=Math.max(maxEcCount,ecCount);dcdata[r]=new Array(dcCount);for(var i=0;i<dcdata[r].length;i++){dcdata[r][i]=0xff&buffer.buffer[i+offset];}
        offset+=dcCount;var rsPoly=QRUtil.getErrorCorrectPolynomial(ecCount);var rawPoly=new QRPolynomial(dcdata[r],rsPoly.getLength()-1);var modPoly=rawPoly.mod(rsPoly);ecdata[r]=new Array(rsPoly.getLength()-1);for(var i=0;i<ecdata[r].length;i++){var modIndex=i+modPoly.getLength()-ecdata[r].length;ecdata[r][i]=(modIndex>=0)?modPoly.get(modIndex):0;}}
        var totalCodeCount=0;for(var i=0;i<rsBlocks.length;i++){totalCodeCount+=rsBlocks[i].totalCount;}
        var data=new Array(totalCodeCount);var index=0;for(var i=0;i<maxDcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<dcdata[r].length){data[index++]=dcdata[r][i];}}}
        for(var i=0;i<maxEcCount;i++){for(var r=0;r<rsBlocks.length;r++){if(i<ecdata[r].length){data[index++]=ecdata[r][i];}}}
        return data;};var QRMode={MODE_NUMBER:1<<0,MODE_ALPHA_NUM:1<<1,MODE_8BIT_BYTE:1<<2,MODE_KANJI:1<<3};var QRErrorCorrectLevel={L:1,M:0,Q:3,H:2};var QRMaskPattern={PATTERN000:0,PATTERN001:1,PATTERN010:2,PATTERN011:3,PATTERN100:4,PATTERN101:5,PATTERN110:6,PATTERN111:7};var QRUtil={PATTERN_POSITION_TABLE:[[],[6,18],[6,22],[6,26],[6,30],[6,34],[6,22,38],[6,24,42],[6,26,46],[6,28,50],[6,30,54],[6,32,58],[6,34,62],[6,26,46,66],[6,26,48,70],[6,26,50,74],[6,30,54,78],[6,30,56,82],[6,30,58,86],[6,34,62,90],[6,28,50,72,94],[6,26,50,74,98],[6,30,54,78,102],[6,28,54,80,106],[6,32,
            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
vue2.0實現引用qrcode.js實現獲取改變二維碼的樣式

     
 
/**
 * @fileoverview
 * - Using the 'QRCode for Javascript library'
 * - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
 * - thi 



  
 

    


    
    
如何使用jquery.qrcode.js插件生成二維碼

     
 hub   需要   gpo   body   一個   type   style   官方文檔   jsp   1、首先需要準備 jquery.qrcode.js 和 jquery.js
github地址：https://github.com/lrsjng/jquery-qrcode
官方文檔地址：http 



  
 

    


    
    
當在微信掃一掃進入小程序 並獲取到二維碼的參數  從而實現掃碼進入小程序

     
 color   要求   decode   第一步   微信   函數   url   技術   bubuko   第一步:  登錄你的小程序賬號,找到設置 ,然後選擇開發設置
點擊添加後進去頁面: 
　　
填寫相應的一些二維碼規則,就是你生成這個掃碼的規則,還有根據項目情況填寫下面對應的要求  保存之後可以 



  
 

    


    
    
java 介面實現壓縮後的生成多張二維碼

     
  
 
 
 pom的jar包： 
  
 <dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version& 



  
 

    


    
    
Jenkins＋Gitlab+蒲公英構建Android專案, 實現自動打包上傳並生產二維碼下載

     
 
                基本準備

# 關閉selinux

setenforce  0

sed   -i     '/=enforcing/s/enforcing/disabled/g'  /etc/sysconfig/selinux

# 關閉防火牆

service   iptables   



  
 

    


    
    
安卓等間取樣縮放演算法的實現與解決ZXing生成DATA MATRIX二維碼太小的問題

     
 
							
							
							

按我的上一篇文章所述，修改生成二維碼的方法後，成功生成了DATA MATRIX格式的二維碼，然而，這個二維碼實在太小，以至於竟然看不見，堪比小芝麻。而Bitmap.createScaleBitmap()方法放大的圖片又十分模糊，無法使用。

於是，尋找了等間 



  
 

    


    
    
js通過codeURL畫二維碼

     
 ready   light   url   qrcode   con   二維   canvas   大小   ()   一、函數封裝

//生成微信二維碼
function xyqrcode(options) {
    var settings = {
        dom:‘‘,
        re 



  
 

    


    
    
博客園打賞功能（未申請下js權限使用二維碼打賞功能）

     
 nbsp   -s   right   菜單   osi   text   fixed   com   posit   第一步：制作收款碼圖片（命名.bmp）；                
第二步：將圖片上傳至博客園文件中，我的博客--管理---上傳文件--上傳成功
 第三步：在博客管理後臺中選中設置菜單 



  
 

    


    
    
微信公眾號獲取臨時二維碼

     
  
 
   我們做微信公眾號開發時為了推廣，可能需要服務端去生成公眾號的臨時二維碼，然後再進行一定的圖片合成操作，製作一張漂亮的推廣海報。別人掃一下二維碼進入關注公眾號介面，點選關注我們可以拿到二維碼裡面的資訊官網地址 
   記錄一下獲取臨時二維碼操作過程。 
   1.獲取 



  
 

    


    
    
js微訊號和二維碼輪播

     
  
 
 <script type="text/javascript"> var arr_wx=["a","b","c"]; var wx_index = Math.floor(Math.random()*arr_wx.length); var stxlwx= arr_wx[wx_index];  



  
 

    


    
    
Java 使用QRCode.jar生成與解析二維碼

     
  
 
 
 宣告：部分程式碼來自慕課網！！！ 
 https://files.cnblogs.com/files/bigroc/QRCode.zip 
 也可以自己下載壓縮包： 
 1、生成（中文網站打不開，建議開啟英文(en)網站）：http://www.swetake.com/qrcode/index- 



  
 

    


    
    
使用golang快速開發微信公眾平臺(八):獲取使用者二維碼

     
 
							
							
							今天終於解決了之前提到的支付url地址無效問題甚是高興，來把二維碼也寫寫。 
二維碼文件寫的簡單明瞭，但是沒有寫咋個實際展示，我試了好久，連base64解碼都考慮了。。。最終發現，還是簡單粗暴的方法適合我。 
業務場景如下：進入頁面，根據獲取到的使用者openI 



  
 

    


    
    
C#呼叫ThoughtWorks.QRCode.dll生成帶引數二維碼

     
 ThoughtWorks.QRCode.Codec.QRCodeEncoder encoder = new QRCodeEncoder();        encoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;//編碼方式(注意：BYTE能支援中文 



  
 

    


    
    
JS 生成及列印二維碼

     
 
1. 字串生成二維碼
HTML程式碼
<div class="qrcBody" id="qrcBody">
                        </div>
js程式碼
jQuery('#qrcBody').qrcode({
       width: 250,
     



  
 

    


    
    
div輸入需要的資料，使用qrcode，點選生成二維碼

     
 
                <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <tit 



  
 

    


    
    
Vue2.0 引用 exif.js 實現調用攝像頭進行拍照功能以及圖片上傳功能

     
 [0   complete   num   else   imp   ada   blob   can   isf   vue組件代碼

<template>
  <div>
    <div style="padding:20px;">
      <div cla 



  
 

    


    
    
VUE D2Admin中引用turn.js 實現翻書效果

     
 
                1.把幾個JS檔案放到路徑…\public資料夾下





2.框架的html頁面引用幾個Js（…\public\index.html）

<script src="./extras/jquery.min.1.7.js"></script>
< 



  
 

    


    
    
js實現生成中間帶圖片的二維碼

     
 也有   一個   二維   cnblogs   記錄   qrc   href   http   找到   之前需要實現生成中間帶圖片的二維碼，所以找了半天終於找到一個可以用的。於是在這裏記錄一下。
下面是需要註意的幾點：
1、使用的js為jquery-qrcode
但是已經經過別人的修改，和網上原來 



  
 

    


    
    
方案優化：網站實現掃描二維碼關註微信公眾號，自動登陸網站並獲取其信息

     
 用戶   class   his   onerror   就會   openid   display   要點   rac   上一篇  《網站實現掃描二維碼關註微信公眾號，自動登陸網站並獲取其信息》 中已經實現用戶掃碼登陸網站並獲取其信息
但是上一篇方案中存在一個問題，也就是文章末尾指出的可以優化的地方（可 



  
 

    


    
    
js驗證碼實現---使用Canvas繪製一個隨機改變的驗證碼圖片

     
  
 
 使用Canvas繪製一個隨機改變的驗證碼圖片,如下圖 
         
 var str = 'ABCDEFGHJKLMNPQRSTWXY3456789'; 
 var char = str[ 0~字串長度間的隨機數 ];