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

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

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

### 一. 需要使用的插件 ###

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

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

### 二. 效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70_pic_center]

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

### 三. 具体代码 ###

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

<body >
        <div class="bg">
            <div class="text">输入网址,点击按钮生成二维码</div>
            <input type="text" class="inp" value="http:www.baidu.com?id=1">
            <button type="button" class="erweima">生成二维码</button>
            <div id="qrcode"></div>
            <div class="text">点击生成图片,将图片分享给别人可以领奖利</div>
            <button type="button" class="picture">生成图片</button>
        </div>
        <div class="need .clearfix" ></div>
    </body>
    <script src="./api/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./api/jquery.qrcode.min.js"></script>
    <script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript" charset="utf-8" async defer></script>
    <script src="./api/canvas2image.js" type="text/javascript" charset="utf-8" async defer></script>

<script>
        var inp=$(".inp").val();
        var info=$(".title");
        var save = $(".save");
        let w = $(window).width(); //图片宽度
        let h = $(window).height(); //图片高度
        console.log(w+" "+h);
        console.log("操作系统"+getOS());
    	//选择需要生成图片的标签, 将jQuery对象转换为dom对象, 
        var need = $("body").get(0); 
        // 生成二维码
        $('.erweima').click(function() { 
            jQuery('#qrcode').qrcode("http://www.baidu.com");
        })
        // 点击转成canvas，最后用于生成图片
        $('.picture').click(function(e) { 
            // 调用html2canvas插件
            html2canvas(need).then(function(canvas) { 
                // canvas宽度
                var canvasWidth = canvas.width;
                // canvas高度
                var canvasHeight = canvas.height;
                // 控制台查看绘制区域的宽高
                console.log('canvas:'+ canvasWidth+" "+canvasHeight);
                // 渲染canvas，这个时候将我们用于生成图片的区域显示出来
                 $(".need").show();
                // 将canvas转为图片
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                // 渲染图片，并且加到页面中查看效果
                $(".need").html(img);
                // 保存
                // console.log(img.src)
                downloadFile('测试.png', img.src);
            });
        });
        // 下载图片
        function downloadFile(fileName, content) { 
            let aLink = document.createElement('a');
            let blob = base64ToBlob(content); //new Blob([content]);
    
            let evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            // aLink.dispatchEvent(evt);
            aLink.click()
        }
        //base64转blob
        function base64ToBlob(code) { 
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
    
            let uInt8Array = new Uint8Array(rawLength);
    
            for (let i = 0; i < rawLength; ++i) { 
              uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType});
        }
    </script>

<style type="text/css" media="screen"> body { 
                margin: 0;
                padding: 20px;
            }
            .bg{ 
                width: 100%;
                min-height: 100%;
                height: 100vh;
                background: url('./image/timg.jpg');
                text-align: center;
                padding-top: 15px;
                text-align: center;
            }
            .text{ 
                color: #fff;
                width: 80%;
                margin: 15px;
                font-weight: 700;
                padding: 0 15px;
                line-height: 50px;
                border: 1px solid #b7c092;
                border-radius: 10px;
                outline: none;
            }
            .inp { 
                width: 80%;
                display: block;
                 margin-left: 30px;
                 margin-bottom: 15px;
                line-height: 40px;
                border: 1px solid pink;
                font-size: 20px;
                border-radius: 10px;
            }
            .save, .picture, .erweima{ 
                border-radius: 10px;
                border: none;
                margin-bottom: 15px;
                width: 150px;
                padding: 15px;
                color: #fff;
                font-size: 22px;
                font-weight: 700;
                background: skyblue;
                outline: none;
            }
            .title{ 
                /* margin-top: 100px; */
            }
            .need{ 
                width: 100%;
                /* background: url(20.jpg) no-repeat; */
                position: fixed;
                left: 0;
                top: 0;
                display: none;
                
            }
            .need img { 
                width: 90%;
                display: block;
                position: absolute;
                left: 5%;
                top: 20px;
                /*transform: translate(-50%, -50%);*/
                border: 1px solid #000;
            }
            .clearfix::before, .clearfix::after { 
              content: "";
              display: table;
            }
    
            .clearfix::after { 
              clear: both;
            }
        </style>

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

[jquery.qrcode.min.js]: http://www.jq22.com/jquery-info294
[html2canvas.js]: http://html2canvas.hertzen.com/dist/html2canvas.min.js
[canvas2image.js]: https://my.oschina.net/u/3407699/blog/1592761
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20230521/7bb52eda987f4deb9b74d2aca1128de7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

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

相关阅读

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

> 领导忽然要我们制作一个动态生成的二维码, 并将二维码保存下来供用户分享,所以研究了一下实现的方法一. 需要使用的插件主要运用到下面三个插件, 网上都可以搜索下载

雨点打透心脏的1/2处/ 2023年05月22日 06:48/ 0 赞/ 4 阅读

相关生成二维码并下载二维码（兼容IE等浏览器）

由于项目需求要点击按钮后，生成二维码并把二维码下载到本地，于是找了大量资料都没能实现兼容IE浏览器的方法，最后终于发现`file-saver`能完美解决这个问题首先在`in

川长思鸟来/ 2023年02月17日 03:57/ 0 赞/ 23 阅读

相关 vue生成二维码并下载二维码

首先安装一下面这个插件 cnpm install vue-qr -S 接下来在需要生产并下载二维码的页面引入 import VueQr from 'v

迈不过友情╰/ 2023年02月14日 15:33/ 0 赞/ 225 阅读

相关生成二维码图片

1.引用 using ThoughtWorks.QRCode.Codec; 在nuget包中下载ThoughtWorks.QRCode包。 2.将base64为图片编码

女爷i/ 2023年01月05日 12:21/ 0 赞/ 303 阅读

相关生成二维码图片

1.引用 using ThoughtWorks.QRCode.Codec; 在nuget包中下载ThoughtWorks.QRCode包。 2.将base64为图片编码

超、凢脫俗/ 2022年11月19日 12:55/ 0 赞/ 282 阅读

相关 vue生成二维码并下载

vue生成二维码图片，这里使用的是qrcode.js 这个插件 1、下载插件 npm install --save qrcodejs2 2、组件内使用 <tem

素颜马尾好姑娘i/ 2022年09月06日 00:12/ 0 赞/ 242 阅读

相关 js将连接生成二维码,并转为图片

<div id="code"></div> <img id="img"/> <script type="text/javascript">

逃离我推掉我的手/ 2022年06月14日 03:59/ 0 赞/ 95 阅读

相关生成二维码图片

示例代码 - (void)click { UIImage image = [self imageQrcodeWithMessage:@

傷城~/ 2022年05月15日 03:14/ 0 赞/ 329 阅读

相关图片二维码生成

package com.qxmof.springutil.wenan.core.api; import java.awt.Color; import java.awt.G

﹏ヽ暗。殇╰゛Y/ 2021年09月27日 16:12/ 0 赞/ 599 阅读

相关 js生成二维码下载二维码 jquery.qrcode.min.js

HTML部分代码 <script src="query-1.10.2.min.js"></script> <script src="jquery.qrcode

柔光的暖阳◎/ 2021年08月28日 23:40/ 0 赞/ 1124 阅读