时间戳

首页 > 解决方案 > 下载文件后删除链接

javascript - 下载文件后删除链接

问题描述

我在下面有这段代码，它由一个 img 和一个捕获按钮组成。我在下面所做的是，每当用户单击下载时，它都会将此链接添加到我的 img src https://cors-anywhere.herokuapp.com/。

我想要完成的是，在下载启动后，我想https://cors-anywhere.herokuapp.com/从我的 img src 中删除该链接。目前我不知道如何解决这个问题，任何帮助将不胜感激，谢谢！

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>

标签： javascriptjqueryhtml

解决方案

你可以这样做：

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;
    }
  })
}

推荐阅读