let inputImg;

let img;

let imgAspect = 0;

let scaledX = 0.0;

let scaledY = 0.0;

​

​

function setup() {

  createCanvas(640, 480);

  inputImg = createFileInput(handleFile);

  inputImg.position(0, 0);

  coordsDiv = createDiv('Coords:');

  coordsDiv.style('font-size', '16px');

  coordsDiv.position(10, height - 20);

}

​

function draw() {

  background(255);

  if (img) {

    image(img, 0, 0, width, width/imgAspect);

    fill(0);

    // text(scaledX + " : " + scaledY, 20, height - 20);

  }

}

​

function mouseMoved() {

  if (img) {

    scaledX = map(mouseX, 0, width, 0.0, 1.0); 

    scaledY = map(mouseY, 0, width/imgAspect, 0.0, 1.0); 

  }

}

function keyPressed(){

  print(scaledX + " : " + scaledY);

  coordsDiv.value(scaledX + " : " + scaledY);

}

​

function mouseClicked(){

  // copyToClipboard(scaledX + " : " + scaledY);

}

​

​

function handleFile(file) {

  // print(file);

  if (file.type === 'image') {

    img = createImg(file.data,  () => {

      imgAspect = img.width / img.height;

      print("aspect " + img.width);

      img.hide();

    });

  } else {

    img = null;

  }

}

​

function copyToClipboard(text) {

    var dummy = document.createElement("textarea");

    document.body.appendChild(dummy);

    dummy.value = text;

    dummy.select();

    document.execCommand("copy");

    document.body.removeChild(dummy);

}

​

​