JSFiddle - React, Tailwind, and code Playground

by germandost

HTML

<img src="{% static 'img/unneutzes/logo.png' %}">

<pre id="output"></pre>

CSS

body {background: lightblue;padding: 0px;}
pre {color: black}
img {position: relative; background:white}

JavaScript

<script>

$(function() {

    $('img').mousemove(function(e) {

        if(!this.canvas) {

            this.canvas = $('<canvas />')[0];

            this.canvas.width = this.width;

            this.canvas.height = this.height;

            this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);

        }

        

        var pixelData = this.canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;

        

        $('#output').html('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);

        

        

    });

});

</script>