JSFiddle - React, Tailwind, and code Playground

by Ranganadh Paramkusam

HTML

<input type="url" id="url" /><button>Capture screenshot</button>
<br />
<img id="shot">

JavaScript

var url = 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed';
$("button").click(function(){
    var website = $("#url").val();
    if(!website){
        alert("Enter website url!");
        return false;
    }
    $(this).attr("disabled",true);
    $(this).text("Capturing screenshot");
    $.ajax({
        url : url,
        data : {
            url : website,
            key : "AIzaSyD_YZ_dp-lllXiRxR8jVrQkzkhp23ocHSk",
            screenshot : true
        },
        success : function(response){
            var obj = response.screenshot;
            var src = "data:" + obj.mime_type + ";base64," + obj.data.replace(/_/g,'/').replace(/-/g,'+');
            $("#shot").attr("src",src);
            $("button").attr("disabled",false);
            $("button").text("Capture screenshot");
        }
    });
});