未捕获的类型错误：尝试下载图像 javascript 时无法读取 null 的属性（读取“src”）

Question

您好，我正在创建一个 Qrcode 生成器，生成后，我想下载它。 我能够使用这段代码，一开始它可以工作，但是我在我的项目中添加了更多代码，它停止工作，我得到了这个错误

(index):337 Uncaught TypeError: Cannot read properties of null (reading 'src')
    at downloadcode ((index):337:51)
    at HTMLButtonElement.onclick ((index):74:91)

这是我的二维码生成的html，我点击function的按钮是

 <!-- Div criada para criar o qrcode 1000x1000 que será utilizado no download, não sendo visivel
      na pagina-->
      <div id="download" style="display: none;"></div>


      <button disabled id="download_button" class="formbold-btn" onclick="downloadcode()">
        Descarregar QR code
      </button>

这是我的下载代码方法

  // Função que faz o download do qrcode em jpg
    function downloadcode() {

      var link = document.createElement("a");
      link.download = "qrcode.jpg";



      var teste = document.getElementById("download");


      link.href = teste.querySelector('img').src;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);


    }

这就是我制作 QrCode 的方式（使用 easyqrcode.js） 我不认为这是问题，因为我尝试生成，就像我在它工作时一样，但不幸的是这次没有工作，但我还是把它放在这里

var options_download = {
        text: texto,
        width: 1000,
        height: 1000,
        colorDark: $('input[name="favcolor"]').val(),
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,

        logoWidth: 475, // fixed logo width. default is `width/3.5`
        logoHeight: 475, // fixed logo height. default is `heigth/3.5`
        logo: imagem, // Relative address, relative to `easy.qrcode.min.js`
        logoBackgroundColor: '#fffff', // Logo backgroud color, Invalid when `logBgTransparent` is true; default is '#ffffff'
        logoBackgroundTransparent: false, // Whether use transparent image, default is false

      }

      new QRCode(document.getElementById("download"),options_download);

我知道错误是说 teste.querySelector('img').src 是 null，但我不明白为什么，因为它以前工作过（下载 function 和 html 的代码相同）

先感谢您

编辑：更多地解释我想做什么。 我生成了一个二维码，它出现在我的 Div 上，ID = 下载，然后单击下载按钮，我想下载它。 即使不使用 img 标签，它也能正常工作，我添加了完整的 html

      <div class="tab">
        <button class="tablinks" onclick="openForm(event, 'telephone')">Contacto</button>
        <button class="tablinks" onclick="openForm(event, 'email')">Email</button>
        <button class="tablinks" onclick="openForm(event, 'url')">Website</button>
        <button class="tablinks" onclick="openForm(event, 'maps')">Localização</button>
        <button class="tablinks" onclick="openForm(event, 'personal')">Personalizado</button>
      </div>

      <!--No input text, relativo ao código hexadecimal da cor, foi definido autocomplete="iasnsdijsdn" , visto
que autocomplete="off" é ignorado nos browsers mais recentes, quando se pretende desligar o autofill
(uma vez que quando se preenchia o formulario com os dados previamente guardados, a caixa relativa à
cor, era automaticamente preenchida com o email), e desta forma, faz com que essa caixa, não seja 
automaticamente preenchida-->
      <form id="form" autocomplete="off">
        <input type="text" id="name" name="name" placeholder="Inserir Nome" class="formbold-form-input" />
        <input type="tel" id="telephone" name="telephone" placeholder="Inserir Contacto Telefone"
          class="formbold-form-input" />
        <input type="email" id="email" name="email" placeholder="Inserir Email" class="formbold-form-input" />
        <input type="website" id="url" name="url" placeholder="Inserir Website" class="formbold-form-input" />
        <input type="website" id="maps" name="maps" placeholder="Inserir Ligação Google Maps"
          class="formbold-form-input" />
        <label id="labelcolor" for="favcolor">Definir cor: </label>
        <input type="color" onchange="changeCol()" id="favcolor" name="favcolor" value="#000000"
          class="formbold-form-input" />
        <input type="text" autocomplete="iasnsdijsdn" onchange="changeColBox()" id="colorcode" name="colorcode"
          value="#000000" class="formbold-form-input" />
        <label for="image" class="btn btn-primary btn-block btn-outlined">Upload Logo (opcional)</label>
        <input type="file" onchange="encodeImageFileAsURL(this)" style="display: none"
          accept="image/jpeg, image/png, image/jpg" id="image" name="image" class="formbold-form-input">
      </form>
      <button id="button" class="formbold-btn" onclick="generatecode(this.value)">
        Gerar QR code
      </button>

      <div id="qrcodes">
        <div id="qrcode_1" class="text-center"></div>
        <div id="qrcode_2" class="text-center"></div>
      </div>


  
      <div id="download" style="display: none;"></div>
      <!-- Div criada para criar o qrcode 1000x1000 que será utilizado no download, não sendo visivel
      na pagina-->
      


      <button disabled id="download_button" class="formbold-btn" onclick="downloadcode()">
        Descarregar QR code
      </button>

    </div>
  </div>

这是我的旧电话 Html

 
      <input type="text" name="name" placeholder="Inserir Nome" class="formbold-form-input" />
      <input type="tel" name="telephone" placeholder="Inserir Contacto Telefone" class="formbold-form-input" />
      <input type="email" name="email" placeholder="Inserir Email" class="formbold-form-input" />
      <input type="website" name="url" placeholder="Inserir Website" class="formbold-form-input" />

      <button class="formbold-btn" onclick="generatecode()">
        Gerar QR code
      </button>


      <div id="qrcodes">
        <div id="qrcode_1" class="text-center"></div>
        <div id="qrcode_2" class="text-center"></div>
      </div>

      <!-- Div criada para criar o qrcode 1000x1000 que será realizado o download, não sendo visivel
      na pagina-->
      <div id="download" style="display: none;"></div>


      <button id="download_button" class="formbold-btn" onclick="downloadcode()">
        Descarregar QR code
      </button>

    </div>
  </div>

我的旧等待生成二维码

  new QRCode(document.getElementById("download"),


          {
            text: 'MECARD:' + 'N:' + name +
              ';TEL:' + $('input[name="telephone"]').val() +
              ';EMAIL:' + $('input[name="email"]').val() +
              ';URL:' + $('input[name="url"]').val() +
              ';;',
            width: 1000,
            height: 1000,
            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H

          });

和下载function

/ Função que faz o download do qrcode em jpg
    function downloadcode() {

      var link = document.createElement("a");
      link.download = "qrcode.jpg";



      var teste = document.getElementById("download");


      link.href = teste.querySelector('img').src;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);

编辑 2：

在尝试了几种东西之后，如果我使用

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" id="download" />

代替

 <div id="download" class="text-center"></div>

qrcode 我尝试生成 img 元素的 Qrcode，但是我的 img 继续空白。

但是，如果我让我的“下载”仅作为一个 div，我的 Qrcore 就会出现在其中，因为它应该如此。 然而在那之后，因为它不是 img 元素，我在尝试获取 URL 时遇到了问题（如果我能得到它，我想我的问题就会解决）

再次感谢你

Answer 1

解决了我的问题！ 能够使用 html2canvas 找到本教程https://www.studentstutorial.com/javascript/convert-html-div-element ，能够将我的 Div 转换为图像，然后正常下载