如何使用截图API实现点击按钮截取指定网页并更新展示图片？

你的代码存在两处明显错误，修复后即可实现点击按钮更换截图的效果：

• ID匹配错误：HTML中img标签的id属性为sh，但JS代码中尝试获取id为screenshot的元素，无法匹配到对应节点自然无法修改src属性
• 输入值读取时机错误：你在页面加载阶段就读取了输入框的value，此时输入框还未填入内容，后续点击按钮时读取的依然是初始的空值，需要把读取输入框值的逻辑移到点击触发的changeimg函数内部，每次点击都重新获取最新输入的网址

修复后完整代码 #

HTML部分

<section>   
  <div class="urldiv">
    <label for="Url">Url</label>
    <br>
    <input type="text" name="Url" id="input" value="" />   
  </div>   
  <div class="ss">
    <img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
  </div>   
  <button onclick="changeimg()">Capture</button>
</section>

JavaScript部分

<script type="text/javascript" charset="utf-8">
  function changeimg() {
    // 每次点击时再读取最新的输入框内容
    var url = document.getElementById("input").value;
    // 匹配正确的img元素id
    document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
  }
</script>

内容的提问来源于stack exchange，提问作者Hanzala Jamal