Web page to image using Ajax and Web2Image Rest API
HTML
<h3>
Conversion example of web page to image using Ajax and Web2Image Rest API <a href="http://www.convertapi.com" target="_blanks">http://www.convertapi.com</a> The converted image is read from JSon object and inserted into Img html element without saving file on disc.</h3>
<input id="txtUrl" value="http://www.google.com" /> Url to convert
<br />
<input id="txtApiKey" type="text" value="" /><a href="http://www.convertapi.com/prices" target="_blanks">Api
Key(get free if you don't have one)</a>
<br />
<button id="btnConvert" type="button">
Convert</button>
<div id="dvStatus">
</div>
<br />
<img id="imgSnapShot" src="">
JavaScript
$(document).ready(function() {
$('#btnConvert').click(function() {
$('#dvStatus').text("Converting, please wait...");
var apiKey = $('#txtApiKey').val();
$.ajax({
type: "POST",
dataType: 'jsonp',
url: 'http://do.convertapi.com/Web2Image/json/',
data: {
'CUrl':$('#txtUrl').val(),
'OutputFormat':'png',
'PageWidth':600,
'ApiKey':apiKey
},
jsonp: "callback",
success: function (data) {
if (data.Result)
{
$('#imgSnapShot').attr('src','data:image/png;base64,'+data.File);
$('#dvStatus').text("Converted successfully!");
}
else {
$('#dvStatus').text("Error: " + data.Error);
}
},
});
});
});