ApiFlash

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
<style>
body {
   font-family: "Rounded Mplus 1c";
   font-size: 100%;
   color: #ecf0f1;
   background: #27ae60;
}

#kkaf {
   font-size: 1.5rem;
   margin: 10px;
}

#inp {
   font-size: 1.5rem;
   margin: 10px;
}

</style>

  <title>スクショ</title>


<style>

#buttonx {
  width:200px;
  color:#ffffff;
  background:#e67e22;
  font-family: fantasy,sans-serif;
  font-size:24px;
  font-weight:bold;
  text-shadow:0 1px 0px #143352,0 2px 0px #143352;
  text-align:center;
  display:inline-block;
  text-decoration:none;
  border:1px solid #225588;
  padding:5px 0 2px 0;
  border-radius:5px;
  margin-bottom:20px;
  margin-left:10px;
  opacity: 0.7;
}

</style>

<style>

div#footer-fixed
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0px;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100%　*/
    height: 70px;              /* 縦幅70px */
}


div#body-bk{
    padding: 0px 0 80px 0;    /* 下に80pxを余白を取る */
}

</style>


</head>

<body>
     <h1>WEBサイトをスクショ</h1>

<div id="body-bk">

<div id="kkaf">
<input id="inp" type="text" name="namae" size="50" placeholder="ここにURLを入力"><br>
<a id="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';urlscr()">スクショ</a>
<a id="buttonx" onmouseover="this.style.background='#e67e22'" onmouseout="this.style.background='#d35400'" onclick="this.style.background='#e74c3c';urlclr()">クリア</a>
<br>
<img id="image" src="http://placehold.jp/24/cccccc/ffffff/400x300.png?text=ここに結果が表示">
</div>

</div>

<div id="footer-fixed">

</div>


<script>
function urlscr() {
  var myImage = document.getElementById('image');
  var myInput = encodeURIComponent(document.getElementById('inp').value);

  var myRequest = 'https://api.apiflash.com/v1/urltoimage?access_key=xxxxxx&url='+myInput;

  fetch(myRequest)
  .then(response => response.blob())
  .then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
    myImage.width = 500;
  });
}


function urlclr() {
  var myImage = document.getElementById('image');
  myImage.src = 'http://placehold.jp/24/cccccc/ffffff/400x300.png?text=ここに結果が表示';
  document.getElementById('inp').value = '';
}

</script>

</body>

</html>