addqrcode

qrcode

目前为 2023-06-13 提交的版本。查看 最新版本

此脚本不应直接安装,它是一个供其他脚本使用的外部库。如果您需要使用该库,请在脚本元属性加入:// @require https://update.gf.qytechs.cn/scripts/468518/1204336/addqrcode.js

  1. function DECqrcode() {
  2. let dialogHtml = '<div id="qrcodeDialog" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; width: 400px; background-color: #ffffff; border-radius: 5px; padding: 20px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">';
  3. dialogHtml += '<div style="font-size: 20px;">选择需要解析的二维码图片</div>';
  4. dialogHtml += '<hr>';
  5. dialogHtml += '<input id="qrcodeFileInput" type="file" accept="image/*" style="margin-bottom: 20px;">';
  6. dialogHtml += '<button id="qrcodeCancelBtn" style="float: right; padding: 2px 5px; font-size: 14px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(66, 185, 131); border: none;border-radius: 3px; cursor: pointer;">关闭</button>';
  7. dialogHtml += '<button id="qrcodeConfirmBtn" style="float: right; margin-right: 10px; padding: 2px 5px; font-size: 14px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(66, 185, 131); border: none;border-radius: 3px; cursor: pointer;">确定</button>';
  8. dialogHtml += '</div>';
  9. $('body').append(dialogHtml);
  10.  
  11. // 取消按钮事件
  12. $('#qrcodeCancelBtn').on('click', function() {
  13. $('#qrcodeDialog').remove();
  14. });
  15.  
  16. // 确认按钮事件
  17. $('#qrcodeConfirmBtn').on('click', function() {
  18. let fileInput = $('#qrcodeFileInput')[0];
  19. if (fileInput.files.length === 0) {
  20. alert('请选择需要解析的二维码图片!');
  21. return;
  22. }
  23.  
  24. let file = fileInput.files[0];
  25. let reader = new FileReader();
  26. reader.onload = function(event) {
  27. let imageData = event.target.result;
  28.  
  29. // 创建一个 Canvas 元素,并将图片渲染到 Canvas 上
  30. let canvas = document.createElement('canvas');
  31. let context = canvas.getContext('2d');
  32. let image = new Image();
  33. image.onload = function() {
  34. canvas.width = image.width;
  35. canvas.height = image.height;
  36. context.drawImage(image, 0, 0);
  37.  
  38. // 获取 Canvas 上的图片数据,并解析二维码
  39. let imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  40. let code = jsQR(imageData.data, imageData.width, imageData.height);
  41. if (code !== null) {
  42. let resultHtml = '<div style="font-size: 16px;">解析结果:' + code.data + '</div>';
  43. resultHtml += '<hr>';
  44. resultHtml += '<button id="qrcodeCopyBtn" style="float: right; margin-right: 10px;padding: 2px 5px; font-size: 14px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(66, 185, 131); border: none;border-radius: 3px; cursor: pointer;">复制</button>';
  45. resultHtml += '<button id="qrcodeCloseBtn" style="float: right;margin-right: 10px; padding: 2px 5px; font-size: 14px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(66, 185, 131); border: none;border-radius: 3px; cursor: pointer;">关闭</button>';
  46. $('#qrcodeDialog').html(resultHtml);
  47.  
  48. // 复制按钮事件
  49. $('#qrcodeCopyBtn').on('click', function() {
  50. let copyText = document.createElement('textarea');
  51. copyText.value = code.data;
  52. document.body.appendChild(copyText);
  53. copyText.select();
  54. document.execCommand('copy');
  55. document.body.removeChild(copyText);
  56. alert('已复制到剪贴板!');
  57. });
  58.  
  59. // 关闭按钮事件
  60. $('#qrcodeCloseBtn').on('click', function() {
  61. $('#qrcodeDialog').remove();
  62. });
  63. } else {
  64. alert('未找到二维码!');
  65. }
  66. };
  67. image.src = imageData;
  68. };
  69. reader.readAsDataURL(file);
  70. });
  71. }
  72. function ADDqrcode() {
  73.  
  74. // 创建关闭按钮并设置样式
  75. var $closeBtn = $('<button>X</button>').css({
  76. 'position': 'absolute',
  77. 'top': '5px',
  78. 'right': '5px',
  79. 'font-size': '16px',
  80. 'line-height': '20px',
  81. 'cursor': 'pointer',
  82. 'background-color': 'rgb(169 169 169)',
  83. 'border': '1px solid rgb(204, 204, 204)',
  84. 'color': 'aliceblue',
  85. });
  86.  
  87. // 关闭按钮事件
  88. $closeBtn.on('click', function() {
  89. $qrDiv.remove();
  90. });
  91.  
  92. // 创建二维码元素并设置样式
  93. var $qrDiv = $('<div id="getqrCode"/>').css({
  94. 'position': 'fixed',
  95. 'top': '50%',
  96. 'left': '50%',
  97. 'transform': 'translate(-50%, -50%)',
  98. 'background-color': 'white',
  99. 'border': '1px solid #c5c5c5',
  100. 'padding': '20px',
  101. 'z-index': '9999',
  102. 'border-radius': '10px',
  103. });
  104.  
  105. // 将关闭按钮添加到二维码元素
  106. $qrDiv.append($closeBtn);
  107.  
  108. // 创建输入框和确定按钮并添加到二维码元素中
  109. var $inputWrapper = $('<div/>').css({
  110. 'width': '100%',
  111. 'margin-top': '10px'
  112. }).appendTo($qrDiv);
  113.  
  114. // 创建输入框并设置样式
  115. var $input = $('<input type="text" placeholder="请输入需要生成的内容"/>').css({
  116. 'width': 'calc(100% - 80px)',
  117. 'padding': '5px',
  118. 'font-size': '16px',
  119. 'border': '1px solid #ccc',
  120. 'border-radius': '3px'
  121. }).appendTo($inputWrapper);
  122.  
  123. // 创建确定按钮并设置样式
  124. var $confirmBtn = $('<button>生成</button>').css({
  125. 'display': 'inline-block',
  126. 'padding': '5px 10px',
  127. 'margin-left': '10px',
  128. 'font-size': '16px',
  129. 'text-align': 'center',
  130. 'color': '#fff',
  131. 'background-color': '#42b983',
  132. 'border': 'none',
  133. 'border-radius': '3px',
  134. 'cursor': 'pointer'
  135. }).on('click', function() {
  136. var text = $input.val();
  137. if (text) {
  138. // 对输入文本进行编码转换
  139. text = toUtf8(text);
  140. // 生成自定义的二维码并替换原有的二维码
  141. $canvas.find('canvas').remove();
  142. $canvas.qrcode({
  143. 'width': 200,
  144. 'height': 200,
  145. 'text': text
  146. });
  147. } else {
  148. alert('请输入需要生成的内容!');
  149. }
  150. }).appendTo($inputWrapper);
  151.  
  152. // 创建包裹二维码的 canvas 容器
  153. var $canvas = $('<div/>').css({
  154. 'margin-top': '20px',
  155. 'text-align': 'center'
  156. }).appendTo($qrDiv);
  157.  
  158. // 添加二维码元素到 body 中
  159. $('body').append($qrDiv);
  160.  
  161. // 生成二维码
  162. $canvas.qrcode({
  163. 'width': 200,
  164. 'height': 200,
  165. 'text': window.location.href
  166. });
  167. $canvas.after('<p style="padding: 10px" >首次打开默认的二维码为当前页面的网址</p>')
  168. };
  169.  
  170.  
  171. function toUtf8(str) {
  172. var out, i, len, c;
  173. out = "";
  174. len = str.length;
  175. for (i = 0; i < len; i++) {
  176. c = str.charCodeAt(i);
  177. if ((c >= 0x0001) && (c <= 0x007F)) {
  178. out += str.charAt(i);
  179. } else if (c > 0x07FF) {
  180. out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
  181. out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
  182. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  183. } else {
  184. out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
  185. out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
  186. }
  187. }
  188. return out;
  189. }

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址