Front-end generation of two-dimensional code

Recently in a mobile-side project, want to implement a click button to generate a shared QR code.

The project was initially based on jquery2.0 development, so first on the JQ plug-in, search to Jquery.qrcode.js, it supports two ways to generate two-dimensional code, in the modern browser support canvas to use canvas to generate shared QR code,

In the low version of IE and other very rubbing browser using table to generate a two-dimensional code image, using the following instructions:

1. First add the jquery library file and the QRCode plugin to the page.

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.qrcode.min.js"></script> 

2. Add the following code where you want the QR code to appear in the page:

<div id="code"></div> 

3, call QRCode plug-in.

QRCode supports canvas and table two ways of rendering pictures, the default use of canvas, the most efficient, of course, the browser supports HTML5. The direct invocation is as follows:

$(‘#code‘).qrcode("http://www.helloweba.com"); //任意字符串 

You can also call it in the following ways:

$("#code").qrcode({ 
    render: "table", //table方式 
    width: 200, //宽度 
    height:200, //高度 
    text: "www.helloweba.com" //任意内容 
}); 

In this way, a QR code can be generated directly from the page, and you can read the QR code information using the "sweep" function of your phone.

4 ,Identify Chinese

When we tried to find the two-dimensional code that did not recognize the Chinese content, we found that the Jquery-qrcode was encoded by the charCodeAt () method. And this method will get its Unicode encoding by default, if it has Chinese content,

Before generating the QR code, the string is converted to UTF-8, and then the QR code is generated. You can use the following functions to convert Chinese strings:

function ToUtf8 (str){
var out, I, Len, C;
out ="";
len = str.length;
for (i =0; i < Len; i++){
c = str.charcodeat (i);
 if ((c >= 0x0001) && (c <= 0x007F)){
Out + = Str.charat (i);
}Elseif (C > 0x07ff){
Out + =String.fromCharCode (0xE0 | (c >>& 0x0F));
Out + =String.fromCharCode (0x80 | (c >>6) & 0x3F));
Out + =String.fromCharCode (0x80 | (c >>0) & 0x3F));
}else {&NBSP;&NBSP;&NBSP;&NBSP; 
              out +=  String.fromCharCode (0xc0 |  (C >>  6)  &  0x1F));      
             out  += string.fromcharcode (0x80 |  (C >>  0)  & 0x3f);      
          }&NBSP;&NBSP;&NBSP;&NBSP; 
      }&NBSP;&NBSP;&NBSP;&NBSP; 
      }&NBSP; 
     

The following example:

var str = toUtf8("钓鱼岛是中国的！"); 
$(‘#code‘).qrcode(str);
以上内容摘抄自：http://www.helloweba.com/view-blog-226.html

But found in the generation of two-dimensional code to find a half-day did not respond, or at all, the personal feeling is mainly I this project is a REM layout, and in the generation of two-dimensional code can not be in rem units, while at the same time in order to ensure the implementation of mobile 1PX, using pixel ratio scaling,

Causes the generated QR code to be difficult to identify.

Later in Segmentfault found a Daniel mentioned using third-party services.

Then right-click the copy link to find the rule: http://pan.baidu.com/share/qrcode?w=150&h=150&url=https://www.baidu.com

This should be Baidu a two-dimensional code generation interface, equivalent to a GET request, where W is 150px,h for the 150px,url is to generate a link to the two-dimensional code, so through the SRC attribute of IMG successfully generated want to QR code, and the resulting QR code is a picture format, there is no compatibility problem ，

Sweep code recognition is also quick, use this method decisively to achieve.

The following is the message from Daniel:

In the two-dimensional code to share the hope that through the way with hash value to determine the source of sharing, found that this is not feasible, do not know whether to generate two-dimensional time or the browser default behavior will be in addition to the # number after the value of all deleted, but change to the way, should generate two-dimensional code way There are many kinds, Look forward to more people to share the rare ingenious skill.

Front-end generation of two-dimensional code