通過使用 JavaScript 單擊按鈕下載圖像

Question

我有這張帶有數據 URL 和按鈕的圖像。

現在，我想使用 JavaScript 下載該圖像。 到目前為止，我得到了這個代碼，但是在下載圖像后它說：看起來我們不支持這種格式。

<img src="data:image/png;base64,iVBORw0KGgoA....." class="filterImage">

<input type="button" name="button" value="Save" id="saveImg" class="btn btn-primary float-right">

function saveImage() {  
  let image = document.querySelector(".filterImage");
  var img = new Image(); 
  
  img.onload = function() {
        let canvas = document.createElement("canvas");
        let width = canvas.width;
        let height = canvas.height;
        let context = canvas.getContext("2d");
        context.drawImage( image, 0, 0, width, height );    
  }

  img.src = image.src;
   
  let link = document.createElement('a');
  link.download = "image.png";
  link.style.opacity = "0";
  link.href = image.src;
  document.body.append(link);   
  link.click();
  link.remove();
}
        
saveImage(); // For testing purpose I am directly calling this function

有什么我錯了嗎？ 我該如何解決？

Answer 1

某些瀏覽器不允許以編程方式單擊鏈接（通過 ~ link.click() ）； 例如，當我嘗試這樣做時，Chrome 會導航到“#blocked”。