js生成二维码,并将页面转为图片同时下载

雨点打透心脏的1/2处 2023-05-22 06:48 100阅读 0赞

领导忽然要我们制作一个动态生成的二维码, 并将二维码保存下来供用户分享,所以研究了一下实现的方法

一. 需要使用的插件

主要运用到下面三个插件, 网上都可以搜索下载到

  1. jquery.qrcode.min.js : 二维码生成插件
  2. html2canvas.js : 将页面元素转化为canvas插件
  3. canvas2image.js : 将canvas转化为图片插件

二. 效果图

在这里插入图片描述

  • 在输入框输入需要生成二维码的链接,
  • 然后点生成二维码,就可以看到新生成的二维码
  • 再点击生成图片, 就可以将页面直接转化为图片 并下载

三. 具体代码

  • 测试过的代码, 可直接复制使用

    1. <div class="bg">
    2. <div class="text">输入网址,点击按钮生成二维码</div>
    3. <input type="text" class="inp" value="http:www.baidu.com?id=1">
    4. <button type="button" class="erweima">生成二维码</button>
    5. <div id="qrcode"></div>
    6. <div class="text">点击生成图片,将图片分享给别人可以领奖利</div>
    7. <button type="button" class="picture">生成图片</button>
    8. </div>
    9. <div class="need .clearfix" ></div>

  • 觉得有用就点个赞吧! O(∩_∩)O哈哈~

发表评论

表情:
评论列表 (有 0 条评论,100人围观)

还没有评论,来说两句吧...

相关阅读