二维码生成器-样式绘制方法可生成js引用

原有的网页小工具均使用后端php二维码生成库，某些小工具会根据当前链接及URL参数实时生成二维码，php后端生成非常耗服务器资源；想要改用前端js生成，最简单的方法直接引用qrcode.js库用于生成二维码即可，后想要二维码更美观，所以改用qrcode-generator 库，同时使用前端js代码配置绘制二维码样式。

想让AI按自己要求写想要的二维码样式绘制方法，确是不容易说清楚，所以使用qrcode-generator库做一个二维码生成器，带二维码美化功能及实时预览，再将绘制方法生成js代码，js代码中内含引用qrcode-generator库。

二维码生成器地址： https://yangjinyou.com/page/qrcode/

一、基础功能（网上大把生成器都一样）

• 外观随心变：支持前景色、渐变色、背景色自由设置，还有四种渐变方向可选。
• 形状任意改：点形状可选方块、圆点、液态圆角；码眼可换圆角矩形或圆形。
• Logo轻松嵌：拖拽上传Logo，精细调节大小、边距、圆角，还能设置透明背景。
• 输出格式多：可下载PNG、SVG矢量图，或直接复制Canvas、SVG代码。

二、样式配置保存与加载

“高级功能”区提供 “配置编号”。点击 “保存配置”，当前所有样式参数（颜色、形状、Logo设置等）会打包成一个唯一编号。下次只需输入编号，点击 “加载”，整套设计立即恢复，秒速复用。

三、生成js绘制方法代码

点击 “生成代码”，工具自动输出可直接嵌入网页的HTML/JavaScript代码，二维码以Canvas形式渲染，完美保留所有定制样式。

* [使用说明]
* 1. 本代码段依赖 qrcode-generator 库，脚本会自动检测并尝试加载 CDN（默认使用cloudflare CDN），不依赖本站资源
* 2. 将本段代码保存为 .js 文件 (例如 qrcode-config.js)
* 并在 HTML 中引入: <script src="qrcode-config.js"></script>
* 3. 在页面中准备一个 canvas 元素，例如: <canvas id="canvas"></canvas>
* 4. 调用全局函数 generateQrCode(canvasId, content) 生成二维码
* 示例: generateQrCode('canvas', 'https://example.com')