二維碼生成器文檔

DemetraGowl 8年前發布 | 13K 次閱讀 二維碼 JavaScript開發 JavaScript

純純的Javascript版，不依賴任何第三方包（不依賴jQuery喔~），就可以輕松地生成二維碼了，支持各種自定義，可以通過自定義顏色生成各種漂亮的、有個性的二維碼。本站已支持使用此功能獲取每個頁面的二維碼。

僅需要瀏覽器支持 canvas ，幾乎所有現代瀏覽器都是支持的（而且本網站也僅支持現代瀏覽器）。

快來試試吧！

點此測試

安裝  

# Via NPM
$ npm install jsqrgen


Via bower


$ bower install jsqrgen
</code></pre> 
  
也可以直接下載 dist/qrgen.min.js 。
 
  
瀏覽器兼容
 
  
 
    
    
 
     Firefox 
     Yes 
    
 
    
 
     Chrome 
     Yes 
    
 
    
 
     Internet Explorer 
     9+ 
    
 
    
 
     Opera 
     12 [1] , 15+ 
    
 
    
 
     Safari 
     Yes 
    
 
    
  
 
  
 
    
    
 
     [1] 
     Opera 12 (Presto) 的 canvas.arcTo 有問題，因此特效可能會不正常。 
    
 
    
  
 
  
函數和方法
 
  
支持UMD加載，得到的對象（如全局對象 qrgen ）有以下方法：
 
  
     
   
  •  
    function qrgen.canvas( options )
     
    生成一個二維碼并畫到 canvas 上。其中 options 是一個 object ，可以有以下屬性（均可選）：
     
     
     </tbody> 
    </table> </li> 
  </ul> 
  
    返回 一個canvas。
     
      
      
     
       屬性 
       類型 
       默認值 
       描述 
      
     
          
      
      
     
       data 
       String 
       '' 
       用于生成二維碼的原始數據，字符串將使用UTF-8編碼。 
      
     
      
     
       cellSize [2] 
       Number 
       2 
       每個小格的像素寬度或高度。 
      
     
      
     
       size [2] 
       Number 
       None 
       最終生成的圖片的像素寬度或高度，如果指定了 cellSize 那么此項被忽略。 
      
     
      
     
       typeNumber 
       Number [1..40] 
       Auto 
       二維碼的 typeNumber ，如果太小將自動增加直到找到一個合適的 typeNumber 。 
      
     
      
     
       correctLevel 
       String {'L', 'M', 'Q', 'H'} 
       'M' 
       二維碼的容錯級別，如果指定了 logo 則設置為 H 。 
      
     
      
     
       colorDark [3] 
       Image | Canvas | String | Array 
       'black' 
       暗格的背景色。 
      
     
      
     
       colorLight [3] 
       Image | Canvas | String | Array 
       'white' 
       亮格的背景色。 
      
     
      
     
       logo 
       Object 
       {} 
        
    可以有以下屬性（均可選）：
     
    若logo是圖片：
     
        
       
         
    • image ：一個 Image 元素，用于傳遞將要畫到二維碼中的圖片。
      •  
        
     
    若logo是文本：
     
        
       
         
    • text ：將要畫成Logo的文本。
      •  
         
    • color ：Logo文本的顏色，默認是 black 。
      •  
         
    • fontStyle ：Logo文本的樣式，如 italic bold 。
      •  
         
    • fontFace ：Logo文本的字體，默認是 Cursive 。
      •  
        
     
    共同屬性：
     
        
       
         
    • clearEdges ：一個Number，指定Logo周圍被破壞的小格的清理級別，默認為 0 。
      •  
         
    • margin ：圖片及周圍小格之間的像素間距，默認為 2 。
      •  
         
    • size ：一個float，表示Logo占二維碼總面積的比例，默認是 .15 （建議使用）。
      •  
        
     </td> 
      </tr> 
      
     
       effect 
       Object 
       {} 
        
    可以有 key 和 value 屬性。
     
        
       
         
    •  
      effect.key = 'round'
       
      effect.value 在0-0.5之間，使小格有一個 value * cellSize 的 border-radius 。
       
      •  
         
    •  
      effect.key = 'liquid'
       
      effect.value 在0-0.5之間，液態效果，即相鄰的小格之間互相融合。
       
      •  
        
         		 
      
     
      
     
       reuseCanvas 
       Canvas 
       None 
       如果設置了 reuseCanvas ，最終的圖片將繪制到這個canvas上。 
      
     
      
     
       noAlpha 
       Boolean 
       true 
       是否去除圖片的alpha通道。 
      
     
  
     
    
    
     
     [2] 
     (1, 2) 建議使用 cellSize 而非 size ，因為當計算出的 cellSize 不是整數時，最后的圖像可能因為被拉伸而變模糊。 
    
     
        
  
     
  
     
    
    
     
     [3] 
     (1, 2) 
    colorDark 和 colorLight 都可以是一個圖片（Image或者Canvas）、一個代表CSS顏色的字符串或者一個數組，數組中的元素可以有以下屬性：
     
      
     
        
        
     
         屬性 
         類型 
         默認值 
         描述 
        
     
        
     
         col 
         Number 
         使用 x 
         起始列的index 
        
     
        
     
         row 
         Number 
         使用 y 
         起始行的index 
        
     
        
     
         cols 
         Number 
         使用 width 
         應用當前樣式的列數 
        
     
        
     
         rows 
         Number 
         使用 height 
         應用當前樣式的行數 
        
     
        
     
         x 
         Number 
         0 
         起始位置的X 
        
     
        
     
         y 
         Number 
         0 
         起始位置的Y 
        
     
        
     
         width 
         Number 
         畫布寬度 
         應用當前樣式的寬度 
        
     
        
     
         height 
         Number 
         畫布高度 
         應用當前樣式的高度 
        
     
        
     
         style 
         String 
         'black' 
         通過其他屬性指定的區域將要應用的CSS填充樣式 
        
     
            
      
     </td> 
    </tr> 
   </tbody> 
  </table>
    
                    
                    
    
                        
     本文由用戶 DemetraGowl 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
    
                        
     轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
    
                        
     本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
    
                        
                        
                    
    

                
                
    
                    
    
                        
    相關經驗
    
                        
                    
    
                    
    
                        
    相關資訊
    
                        
                    
    
                    
    
                        
    相關文檔
    
                        
                    
    

                    
                
    
            
        
      




       
        
    
    
    
    
    
    
 
    
    

    
    

    
    
    
    
    


  • 

  • 

    • 

    •
sesese色