JavaScript生成二维码图片小结

使用JavaScript生成二维码图片可以方便地分享一些跨平台内容，比如网址、联系方式、文本等等。下面是一个详细的攻略：

安装qrcode库

在使用JavaScript生成二维码图片之前，我们需要先安装相应的库。这里我们使用qrcode库，它可以非常方便地生成二维码图片。在命令行中输入以下命令进行安装：

npm install qrcode --save

导入库

安装完qrcode库之后，我们需要在脚本中导入该库。可以通过以下代码来实现：

const QRCode = require('qrcode');

生成二维码图片

有了qrcode库之后，我们就可以开始生成二维码了。以下代码可以用来生成一个包含Hello, world!文本信息的二维码。

QRCode.toDataURL('Hello, world!', function (err, url) {
  console.log(url);
})

总体来说，这段代码分三部分：第一部分是调用QRCode.toDataURL函数，该函数将文本信息转换成二维码图片。第二部分是一个回调函数，该函数在图片生成成功或者失败后被执行。第三部分是将生成的图片url打印到控制台，可以在浏览器中访问该url以显示二维码。

添加到页面中

生成的二维码图片可以通过以下代码添加到页面中：

QRCode.toDataURL('Hello, world!', function (err, url) {
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
})

其中document.createElement('img')创建了一个新的img元素，img.src = url将图片url赋值给该元素，document.body.appendChild(img)将该元素添加到页面中。

示例1：生成包含网址信息的二维码

下面是一个示例代码，该代码将一个网址信息转换为二维码图片并添加到页面中。

const url = 'https://www.google.com';
QRCode.toDataURL(url, function (err, url) {
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
})

示例2：生成包含联系方式的二维码

下面是另一个示例代码，该代码将一个电话号码和电子邮件地址信息转换为二维码图片并添加到页面中。

const contact = 'tel:[phone]\nmailto:[e-mail]';
QRCode.toDataURL(contact, function (err, url) {
  const img = document.createElement('img');
  img.src = url;
  document.body.appendChild(img);
})

在这个例子中，我们将电话号码和电子邮件地址通过\n符号连接在一起，然后将它作为文本信息传递给了QRCode.toDataURL函数。生成的二维码图片包含了这些联系方式，并可以通过移动设备上的相机扫描来实现拨号或发送邮件等操作。

以上就是在JavaScript中生成二维码图片的详细攻略，希望对你有所帮助！