JSFiddle - React, Tailwind, and code Playground

by argiropoulostauros

JavaScript

let x= 38.041242 ,y= 23.679595
let myString1 = `https://maps.googleapis.com/maps/api/streetview?location=${x},${y}&size=300x300&pitch=90`
getBase64FromImageUrl(myString1);

function getBase64FromImageUrl(url) {
    var img = new Image();
var range = 60;
    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);





//console.log("imageData",imageData);
        //var dataURL = canvas.toDataURL("image/png");
        var index = (150*imageData.width + 150) * 4;
    var red = imageData.data[index];
    var green = imageData.data[index + 1];
    var blue = imageData.data[index + 2];
    var alpha = imageData.data[index + 3];
    console.log(red)
    console.log(green)
    console.log(blue)
    var rangedRB = red -range;
    var rangedGB = green -range;
    var rangedBB = blue -range;
    
    var rangedRT = red +range;
    var rangedGT = green +range;
    var rangedBT = blue +range;
    
var data = imageData.data;
var counter = 0;
for(var i=0; i<data.length; i+=4) {
  var red = data[i];
  var green = data[i+1];
  var blue = data[i+2];
  if ((red<rangedRT && red>rangedRB) && (green<rangedGT && green>rangedGB) && (blue<rangedBT && blue>rangedBB)){
  counter = counter +1;

  }
}
console.log("counterFinal",counter)
console.log("data.length",data.length/4)
console.log("percentage:",(counter/(data.length/4))*100)

//console.log(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
       // alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}