CODEWITHSUNDEEP
htmlangulartypescriptmouseovercolor-picker
WastedFreeTime
WastedFreeTime

Reputation: 325

Angular 8 getting color on mouseover via color picker

iam trying to build my own colorpicker in Angular 8. I want to use a colorwheel like this.
I thought I maybe get useful data out of the mouseover event but i have no idea if this is the goto.

<img
    (mouseover)="getColorOnMouseOver($event)"
    src="colorwheel.png"
    style="max-width: 500px; max-height: auto;"
>

I found a helpful post (https://stackoverflow.com/a/59401835/12282474). Mabye i can use something shown like here and get the color of each pixel from my colorwheel.png ... but iam really new to Angular so i got no success recreating the solution in my project.

Thanks for every help!

Upvotes: 0

Views: 1570

Answers (1)

dizzzzy
dizzzzy

Reputation: 156

You are on the right path. Check this link out on how to make your own color wheel and this post on how to use the canvas with angular. The solution is written in js using jquery so you can always update it to angular. It uses a canvas to draw the color wheel image and then the mousemove function (mouseover in angular) to get your pointer's current pixel rbg information. You can then use the click event to lock in the color you want.

$(function(){

    // create canvas and context objects
    var canvas = document.getElementById('picker');
    var ctx = canvas.getContext('2d');

    // drawing active image
    var image = new Image();
    image.onload = function () {
        ctx.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas
    }

    // select desired colorwheel
    var imagesrc="images/colorwheel1.png";
    switch ($(canvas).attr('var')) {
        case '2':
            imagesrc="images/colorwheel2.png";
            break;
        case '3':
            imagesrc="images/colorwheel3.png";
            break;
        case '4':
            imagesrc="images/colorwheel4.png";
            break;
        case '5':
            imagesrc="images/colorwheel5.png";
            break;
    }
    image.src = imageSrc;

    $('#picker').mousemove(function(e) { // mouse move handler
        if (bCanPreview) {
            // get coordinates of current position
            var canvasOffset = $(canvas).offset();
            var canvasX = Math.floor(e.pageX - canvasOffset.left);
            var canvasY = Math.floor(e.pageY - canvasOffset.top);

            // get current pixel
            var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
            var pixel = imageData.data;

            // update preview color
            var pixelColor = "rgb("+pixel[0]+", "+pixel[1]+", "+pixel[2]+")";
            $('.preview').css('backgroundColor', pixelColor);

            // update controls
            $('#rVal').val(pixel[0]);
            $('#gVal').val(pixel[1]);
            $('#bVal').val(pixel[2]);
            $('#rgbVal').val(pixel[0]+','+pixel[1]+','+pixel[2]);

            var dColor = pixel[2] + 256 * pixel[1] + 65536 * pixel[0];
            $('#hexVal').val('#' + ('0000' + dColor.toString(16)).substr(-6));
        }
    });
});

Upvotes: 1

Related Questions