jquery.qrcode.js generates QR code plugin & converts to image format

1. qrcode actually realizes graphics rendering and drawing by using jQuery, and supports canvas (HTML5) and table.

github source address:

https://github.com/jeromeetienne/jquery-qrcode

Parameter Description:

  1. render : "canvas" , //Set the rendering method
  2. width : 256 , //set width
  3. height : 256 , //set height
  4. typeNumber : - 1 , //Calculation mode
  5. correctLevel : QRErrorCorrectLevel . H , //error correction level
  6. background : "#ffffff" , //background color
  7. foreground : "#000000" //Foreground color

2. Example of use:

Plugin reference

  1. <script src="../Js/jquery-1.11.3.min.js"></script>
  2. <script src="../Js/jquery-qrcode-master/jquery.qrcode.min.js"></script>
Simple example 1:
  1. <div id="code"></div>
  2. <script>
  3. //Generate QR code from any string
  4. //Use Canvas to draw by default
  5. $('#code').qrcode('http://blog.csdn.net/u011127019');
  6. </script>


Simple example 2:

  1. <div id="code"></div>
  2. <script>
  3. //table mode is compatible with IE lower version
  4. $('#code').qrcode({
  5. render: 'table',
  6. width: 100,
  7. height: 100,
  8. text: 'http://blog.csdn.net/u011127019'
  9. });
  10. </script>
Simple example 3 (Chinese support):

During our test, we found that the QR code cannot recognize the Chinese content. By looking up multiple sources, we learned that jquery-qrcode uses the charCodeAt() method for encoding conversion. This method will obtain its Unicode encoding by default. If there is Chinese content, the string must be converted to UTF-8 before generating the QR code, and then the QR code will be generated.

  1. <div id="code"></div>
  2. <script>
  3. //If there is Chinese in the content, convert the string to utf-8 when generating the QR code money
  4. function toUtf8(str) {
  5. var out, i, len, c;
  6. out = "";
  7. len = p. length ;
  8. for (i = 0; i < len; i++) {
  9. c = str.charCodeAt(i);
  10. if ((c >= 0x0001) && (c <= 0x007F)) {
  11. out += str.charAt(i);
  12. } else if (c > 0x07FF) {
  13. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  14. out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
  15. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  16. } else {
  17. out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
  18. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  19. }
  20. }
  21. return out;
  22. }
  23. $('#code').qrcode({
  24. text : toUtf8 ( 'I am tianma' ),
  25. width: 150,
  26. height: 150
  27. });
  28. //For the current WeChat/Alipay and other QR codes that do not recognize other colors
  29. $('#code').qrcode({
  30. text : toUtf8 ( 'I am tianma' ),
  31. width: 150,
  32. height: 150,
  33. background: '#f00',
  34. foreground: '#0f0'
  35. });
  36. </script>
Example 4:
  1. //The length of the value of the text attribute cannot be too long, the maximum number of bytes is 10208
  2. //text string is too long. Wechat/Alipay, etc. cannot be recognized by scanning. Weibo recognizes more content.
  3. //Scan Weibo: within about 200 characters, Scan WeChat: within 160 characters, Scan Alipay: within about 130 characters
  4. $('#code').qrcode({
  5. text: toUtf8('SignalR is a Microsoft .NET Framework library and jQuery plugin being developed by the ASP.NET team and may be included in future versions of the ASP.NET platform. It provides some very promising features that are Yes, and more and more, not currently available, '),
  6. width: 150,
  7. height: 150
  8. });


Example 5, convert the generated QR code into a picture format:

  1. <div id="divOne"></div>
  2. <img id='imgOne' style='border:1px solid red;'/>
  3. <script>
  4. //By default, Canvas is used to generate and display to the picture
  5. var qrcode= $( '#divOne' ). qrcode ( 'http://www.gongjuji.net/' ). hide ();
  6. var canvas=qrcode.find('canvas').get(0);
  7. $('#imgOne').attr('src',canvas.toDataURL('image/jpg'))
  8. </script>
Show results:

Example 6, adding text or logo processing to the current picture:

  1. //Use Canvas to draw by default
  2. var qrcode = $( '#code' ). qr code ({
  3. text: '@url',
  4. width: 400,
  5. height: 400
  6. }).hide();
  7. //add text
  8. var text = "Test text content" ; //Set the text content
  9. var canvas = qrcode.find('canvas').get(0);
  10. var oldCtx = canvas.getContext('2d');
  11. var imgCanvas = document . getElementById ( 'imgCanvas' );
  12. var ctx = imgCanvas.getContext('2d');
  13. ctx.fillStyle = 'white';
  14. ctx.fillRect(0,0,imgCanvas.width,imgCanvas.height);
  15. ctx.putImageData(oldCtx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
  16. ctx.fillStyle = 'red';
  17. ctx.strokStyle = 'rgb(1,1,0)';
  18. //ctx.stroke = 3;
  19. ctx.textBaseline = 'middle';
  20. ctx. textAlign = 'center' ;
  21. ctx.font = 'bolder 30px Helvetica';
  22. ctx.fillText(text, imgCanvas.width / 2, imgCanvas.height - 20);
  23. ctx.strokeText(text, imgCanvas.width / 2, imgCanvas.height - 20);
  24. imgCanvas.style.display = 'none';
  25. $('#imgCode').attr('src', imgCanvas.toDataURL('image/png')).css({
  26. maxWidth:300
  27. });


Reprinted from: http://www.helloweba.com/view-blog-226.html

Tags: jquery.qrcode.js generates QR code plugin & converts to image format

jQuery plugin Jquery.qrcode js generates QR code

Related: jquery.qrcode.js generates QR code plugin & converts to image format