Get image coordinates on click

#resource

by Jérôme Sengel

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <img ref="image" :src="image" @click="updateCoords">
  <div class="line x"></div>
  <div class="line y"></div>
</div>
<div id="coordinates">
  <span id="x">x</span>,<span id="y">y</span>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  border-radius: 5px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  float: left;
}

#app .line {
  pointer-events: none;
}

#app .y {
  width: 1px;
  height: 100%;
  top: 0;
  background: red;
  position: absolute;
  left: var(--mouse-x);
}

#app .x {
  width: 100%;
  height: 1px;
  background: red;
  position: absolute;
  top: var(--mouse-y);
}

#app img {
  width: auto;
  height: auto;
  max-height: 100vh;
  max-width: 100vw;
}


/* Footer */
.foot {
  --radius: 3px;
  font-family: Ubuntu;
  position: fixed;
  margin: auto;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 11px;
  background: #20262e;
  border-top: 2px solid #272d35;
  color: #747474;
  padding: 5px;
  text-align: center;
}

#coordinates {
  color: white;
  float: left;
  margin-left: 10px
}

Vue

new Vue({
  el: "#app",
  data(){
    return {
      image: 'https://www.chanel.com/images//t_one///q_auto:good,f_auto,fl_lossy,dpr_1.1/w_1240/coco-crush-earrings-beige-beige-gold-packshot-portee-2-j11754-9525201993758.jpg' 
    }
  },
  methods: {
    updateCoords(click){
      const image = this.$refs.image;
      const percentageX = click.offsetX / image.width * 100,
            percentageY = click.offsetY / image.height * 100;
      this.$root.$el.style.setProperty('--mouse-x', (percentageX - 1) + "%");
      this.$root.$el.style.setProperty('--mouse-y', percentageY + "%");
      this.$coordinates.$x = "okk";
      console.log([percentageX, percentageY]);
      console.log([Math.round(percentageX), Math.round(percentageY)]);
    }
  }
}, {
  el: "#coordinates",
  methods: {
    updateCoords(click){
      this.$coordinates.$x = "okk";
    }
  }
})