javascript - 超链接下载 img src 的任何内容

标签 javascript image dom download

好吧,我似乎找不到任何关于我正在做的事情的信息。

无论如何,我需要设置一个超链接来下载图像。该图像已经有一个 id。

每次用户显示图像时,下载链接都会下载他们输入的图像。

运行代码时,输​​入 255812 作为图像代码。

function myFunction() {
  var x = document.getElementById("imagetxt").value;
  var y = "http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-" + x + ".jpg";

  // Creating an image
  var img = new Image();

  // Defining the function if image loads successfully.
  img.onload = function() {
    document.getElementById("image1").src = y;
  };

  //Defining the function if image fails to load.
  img.onerror = function() {
    alert("Image not found");
  };
  img.src = y;
}
<body align="center">
  <div>
    <img src="http://i.imgur.com/dXo8Fxp.png" width="20%" height="20%">
  </div>
  <div>
    <img src="http://i.imgur.com/jCOLCiU.png" width="8%" height="8%">
  </div>
  <div>
    <input id="imagetxt" size="6" type="text" value="">
  </div>
  <div>
    <input id="btn1" type="button" value="Display" onclick="myFunction()" style="top: 5px; position: relative;">
  </div>
  <div>
    <img id="image1" src="" width="30%" height="30%" style="top: 10px; position: relative;">
  </div>
  <a href="???" id="imageDL" onclick="??">DOWNLOAD THIS</a>

最佳答案

去掉 anchor 标记上的onclick

 <a href="#" id="imageDL" download>DOWNLOAD THIS</a>

在img.onload中设置 anchor 的href

img.onload = function() {
    document.getElementById("image1").src = y;
    document.getElementById("imageDL").href = y;
};

关于javascript - 超链接下载 img src 的任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34382369/

相关文章:

javascript - 来自输入标签的警报

javascript - 如何使用 jquery 为每个值动态添加清除按钮?

javascript - 如何使用 cypress.io 检查嵌套的阴影元素

html - dom 对象加载困惑/错位,然后在满载时正确设置

javascript - 如何删除最后执行的命令 html + javascript?

javascript - NodeWebkit - 部署应用程序

javascript - 我的 JavaScript 有什么问题吗?图像褪色

javascript - 设置 Canvas 中图像的大小

javascript - HTML + Javascript 表单提交问题

javascript - 检测键是否应被视为样式或属性