Web page to image using Ajax and Web2Image Rest API

by tomasr

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="jumbotron">
    <h1>Web to Png - ConvertAPI</h1>
    <p class="lead">Conversion example of web page to image using Ajax and Web2Image Rest API <a href="https://www.convertapi.com" target="_blanks">http://www.convertapi.com</a> The converted image is loaded from JSon object and inserted into Img html element without
      saving file on disc.</p>
    <div class="form-group">
      <label for="txtUrl">Url to convert</label>
      <input type="text" class="form-control" id="txtUrl" placeholder="Url to convert" value="http://www.google.com">
    </div>
    <div class="form-group">
      <label for="txtApiKey">Secret</label>
      <input type="text" class="form-control" id="txtApiKey" placeholder="Secret" value="">
      <p class="help-block"><a href="https://www.convertapi.com/a/su" target="_blanks">Secret  - get free if you don't have one</a></p>
    </div>
    <button id="btnConvert" type="button" class="btn btn-default">
      Convert</button>
    <hr>
    <div id="dvStatus" class="alert alert-info" role="alert"></div>
    <img id="imgSnapShot" src="">
  </div>

JavaScript

$(document).ready(function() {
    $('#btnConvert').click(function() {

      $('#dvStatus').text("Converting, please wait...");

      var secret = $('#txtApiKey').val();

      $.ajax({
        type: "POST",
        url: 'http://v2.convertapi.com/web/to/png?secret=' + secret,
        data: {
          'Url': $('#txtUrl').val(),
          'ImageWidth': 1000,
          'Zoom': 0.8
        },
        error: function(error) {
          $('#dvStatus').text(error.responseText);
        },
        success: function(data) {
          $('#imgSnapShot').attr('src', 'data:image/png;base64,' + data.Files[0].FileData);
          $('#dvStatus').text("Converted successfully!");
        },
      });


    });
  });