利用canvas绘制二维码

最新推荐文章于 2023-07-16 13:58:37 发布

ｌｉｕ

最新推荐文章于 2023-07-16 13:58:37 发布

阅读量2.1k

点赞数 3

分类专栏： js利用canvas绘制二维码文章标签： js

本文链接：https://blog.csdn.net/lingluodeguye/article/details/112565490

版权

js利用canvas绘制二维码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

所引用得js

jquery.min.js
jquery.qrcode.js
utf.js

html 代码：

<body >
<div >
    <h1>这是我的第一个demo</h1>
    <div style="position:relative;height: 100%;width: 100%" class="img_width">
        <div id="imagQrDiv" class="zmry_ewm" style="width: 33%;bottom: 2%;left: 65%">
        </div>
        <div id="ewmpics" class="zmry_ewm"  style="display: none;"></div>
    </div>
</div>
</body>

js代码如下：

<script type="text/javascript">
    $(document).ready(function() {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var ww = 1080;
        var hh = 1920;
        canvas.width = ww;//1080
        canvas.height = hh;//1732


        $("#ewmpics").qrcode({
            render : "canvas",    //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
            text : "http://www.baidu.com",    //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
            width : "140",               //二维码的宽度
            height : "140",              //二维码的高度
            background : "#ffffff",       //二维码的后景色
            foreground : "#000000",        //二维码的前景色
        });
        //获取网页中的canvas对象
        var mycanvas1=document.getElementsByTagName('canvas')[0];
        //将转换后的img标签插入到html中
        var img=convertCanvasToImage(mycanvas1);
        $('#imagQrDiv').append(img);//imagQrDiv表示你要插入的容器id
    });


    //从 canvas 提取图片 image
     function convertCanvasToImage(canvas) {
        //新Image对象，可以理解为DOM
        var image = new Image();
        // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
        // 指定格式 PNG
        image.src = canvas.toDataURL("image/png");
        return image;
    }
</script>

ｌｉｕ

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用canvas绘制二维码

所引用得jsjquery.min.jsjquery.qrcode.jsutf.jshtml 代码：<body ><div > <h1>这是我的第一个demo</h1> <div style="position:relative;height: 100%;width: 100%" class="img_width"> <div id="imagQrDiv" class="zmry_.
复制链接

扫一扫