QRCode.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. app.service("QRCodeOptions", ['$rootScope', function ($rootScope) {
  2. //生成二维码
  3. function getQRCodeImageData(option) {
  4. var text = option.text, label = option.label, logoDom = option.logoDom;
  5. var size = 200;
  6. var labelHeight = 0;
  7. var logoSize = 40;
  8. if (label != null) {
  9. labelHeight = 30;
  10. }
  11. //生成二维码
  12. var qrDom = $("<div></div>");
  13. qrDom.qrcode({
  14. render: "canvas", // 渲染方式有table方式(IE兼容)和canvas方式
  15. width: size, //宽度
  16. height: size, //高度
  17. text: text, //内容
  18. typeNumber: -1,//计算模式
  19. correctLevel: 2,//二维码纠错级别
  20. background: "#ffffff",//背景颜色
  21. foreground: "#000000" //二维码颜色
  22. });
  23. var canvas = qrDom.find("canvas")[0];
  24. var context = canvas.getContext("2d");
  25. var imgData = context.getImageData(0, 0, size, size);//获取到二维码图片数据流
  26. //生成背景(用来绘制标签、背景图等)
  27. var backDom = $("<canvas></canvas>");
  28. var maxW = size;
  29. var maxH = size + labelHeight;
  30. var left = 0;
  31. var top = 0;
  32. backDom.attr({"width": maxW, "height": maxH});
  33. var backCanvas = backDom[0];
  34. var ctx = backCanvas.getContext("2d");
  35. //填充背景为白色
  36. ctx.fillStyle = "#fff";
  37. ctx.fillRect(0, 0, maxW, maxH);
  38. ctx.putImageData(imgData, left, top);//合并二维码到带背景信息的画布
  39. if (label) {
  40. //绘制标题
  41. ctx.font = "bold 24px Arial";//使用粗体,稍大的字号,否则打印出来的不清晰
  42. ctx.textAlign = "center";
  43. ctx.fillStyle = "#000";
  44. ctx.fillText(label, size / 2 + left, (size + labelHeight - 8) + top);
  45. }
  46. //绘制logo
  47. if (logoDom) {
  48. var logoBorder = 4;
  49. var centerSize = 2 * logoBorder + logoSize;
  50. if ($("#qrcodeOptPreviewLogo").length > 0) {
  51. //清空中心区域用来绘制logo
  52. ctx.rect((size - centerSize) / 2 + left, (size - centerSize) / 2 + top, centerSize, centerSize);
  53. ctx.fillStyle = "#fff";
  54. ctx.fill();
  55. //logo图片
  56. ctx.drawImage(logoDom, (size - logoSize) / 2 + left, (size - logoSize) / 2 + top, logoSize, logoSize);
  57. } else {
  58. console.log("请在页面中放置一个qrcodeOptPreviewLogo")
  59. }
  60. }
  61. var dataURL = backCanvas.toDataURL("image/png");
  62. return dataURL;
  63. }
  64. return {
  65. getQRCodeImageData: getQRCodeImageData
  66. };
  67. }]);