загрузить холст с qr-кодом в виде изображения с фоном

#javascript #html #css #canvas

#javascript #HTML #css #холст

Вопрос:

У меня возникли проблемы при попытке загрузить холст с 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');

Пожалуйста, помогите мне. Большое спасибо.

1. Добавьте свой test (30).jpg на некоторые серверы обмена файлами. Мне кажется, что с этим файлом все в порядке, но ваше приложение для предварительного просмотра изображений постоянно добавляет черный фон.

2. Какой API / библиотеку вы используете, вам нужно указать это в сообщении

Ответ №1:

Вы можете попробовать добавить белую рамку к вашему объекту ctx.

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

1. Я пробовал, но это не работает. Ничего не меняется:(

2. Это не сработает, если вы не измените размер холста. Из того, что я могу сказать, кажется, что холст на самом деле равен размеру QR-кода

Ответ №2:

Не уверен, нужен ли вам ваш метод генерации QR-кода … если нет, вы можете использовать Qurious, у которого есть свой собственный вариант заполнения — он также генерирует qr-код в canvas.

Добавьте это в верхнюю часть:

 <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")