js 点击按钮生成带二维码的图片

最新推荐文章于 2022-06-09 22:10:31 发布

有脾气的程序媛

最新推荐文章于 2022-06-09 22:10:31 发布

阅读量1.2k

点赞数 1

分类专栏： h5 文章标签： js canvas

本文链接：https://blog.csdn.net/p_pppxxxxmmm/article/details/102584166

版权

本文介绍如何通过HTML和JavaScript结合相关插件，实现点击按钮后生成包含二维码的图片，并进一步将二维码与个人头像合成为一张完整的图片。详细步骤包括引入插件、编写HTML页面、生成二维码以及图片合成。

摘要由CSDN通过智能技术生成

1、html引入以下两个插件

<script src="../../js/jquery-1.8.3.min.js"></script>
<script src="js/qrcode.min.js"></script>

2、html页面代码：

<div id="code" class="block"></div>//装二维码用的
<img src="" id="avatar" />//最终生成的图片用的

3、生成二维码

//生成二维码
        new QRCode(document.getElementById("code"), data.url);  // data.url就是放在二维码里面的参数，

4、将二维码和图片和个人头像合成一张图片

function pictureMerging() {
        var canvas = document.createElement("canvas");
        canvas.width = 318.75;
        canvas.height = 566.95;
        var context = canvas.getContext("2d");
        var imgSrc1 = document.getElementById("PHimg").src;//头像地址
        //以下是生成的图片会模糊，处理图片模糊的方法
        var devicePixelRatio = window.devicePixelRatio || 1,