下载二维码画布作为带背景的图像答案

【问题标题】：download qr code canvas as image with background下载二维码画布作为带背景的图像
【发布时间】：2020-12-17 04:00:32
【问题描述】：

我在尝试将 QR 码画布作为带背景的图像下载时遇到了麻烦。下载工作正常，但由于边框不完整，我的设备无法扫描代码。我需要把后面的白色背景放大。

当前图片：

预期图像：

我当前的代码：

<a id="download-qr">
<div id="qrCode"></div>

  $('#qrCode').qrcode({
     render: "canvas",
     minVersion: 8,
     maxVersion: 8,
     ecLevel: 'M',
     size: 200,
     mode: 0,
     text: code,
  });

  var canvas = $("#qrCode").children(":first")[0];
  var ctx = canvas.getContext("2d");
  ctx.globalCompositeOperation = 'destination-over';
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  var img = canvas.toDataURL("image/jpeg");
  var dl = document.getElementById('download-qr');
  dl.setAttribute('href', img);
  dl.setAttribute('download', 'test.jpg');

请帮助我。非常感谢。

【问题讨论】：

将您的test (30).jpg 添加到一些文件交换服务器。在我看来，该文件还可以，但是您的图像预览应用程序一直在添加黑色背景。
你使用的是什么api/库，需要在帖子中说明

标签： javascript html css canvas

【解决方案1】：

您可以尝试为您的 ctx 对象添加白色边框。

ctx.lineWidth = 5;
ctx.strokeStyle = "white";
ctx.stroke();

【讨论】：

我试过了，但还是不行。没有任何变化:(
除非您调整画布的大小，否则这将不起作用。据我所知，画布似乎实际上是二维码的大小

【解决方案2】：

不确定您是否需要生成二维码的方法...如果不需要，您可以使用Qurious，它有自己的填充选项 - 它还在画布中生成二维码。

在头部添加这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

HTML：

<canvas id="qrCode"></canvas>

脚本：

const makeQR = (your_value) => {
      let qrcodeContainer = document.getElementById("qrCode");
        qrcodeContainer.innerHTML = "";
        new QRious({
          element: qrcodeContainer,
          value: your_value,
          size: 600,
          padding:50,
        }); // generate QR code
        
        var link = document.createElement('a');
        link.download = 'your_file.png';
        link.href = document.getElementById('qrCode').toDataURL()
        link.click(); // download it
        
    }

makeQR("your value")

【讨论】：