如何使用截图api?

Question

我正在练习使用api抓取网页截图。

我想改变img src，在按钮上点击。

代码如下:

<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">

var url = document.getElementById("input").value;
function changeimg() {
document.getElementById("screenshot").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
}
</script>

Answer 1

您应该在函数内获得输入值并且imgid是sh而不是screenshot

现在是工作

const input = document.getElementById("input");
function changeimg() {
document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + input.value + "&dimension=1024x768";
}

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