下载文件后删除链接

Question

我在下面的代码中包含一个img和一个捕获按钮。 我在下面所做的是，每当用户单击下载时，它将在此链接之前添加到我的img src https://cors-anywhere.herokuapp.com/ 。

我要完成的工作是，启动下载后，我想从我的img src中删除该链接https://cors-anywhere.herokuapp.com/ 。 目前，我不知道如何进行此操作，将不胜感激，谢谢！

 function sendData() { html2canvas(document.getElementById('capture'), { allowTaint: false, useCORS: true }).then(function(canvas) { $('#testaroni').attr('src', function(index, src) { return 'https://cors-anywhere.herokuapp.com/' + src; }); $('#test').attr('href', canvas.toDataURL('image/png')); $('#test').attr('download', 'Test.png'); $('#test')[0].click(); }); } 

 <!DOCTYPE html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="//#" /> <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </head> <body> <div id="capture"> <div class="jobs-panel"> <img id="testaroni" data-target="#openly" src="https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png" width="300" height="300"> </div> </div> <button type="button" onclick="sendData()" ;>Capture!</button> <a id="test" href="#"></a> </body> </html> 

Answer 1

您可以这样：

var flag = true;
function sendData() {
  html2canvas(document.getElementById('capture'), {
    allowTaint: false,
    useCORS: true
  }).then(function(canvas) {
    $('#testaroni').attr('src', function(index, src) {
      return 'https://cors-anywhere.herokuapp.com/' + src;
    });
    if(flag == true)
    {
        $('#test').attr('href', canvas.toDataURL('image/png'));
        $('#test').attr('download', 'Test.png');
        $('#test')[0].click();
        $('#testaroni').attr('src','https://cdn.bulbagarden.net/upload/thumb/4/49/Ash_Pikachu.png/250px-Ash_Pikachu.png');
        flag = false;
    }
  })
}