Adjust the point color of landmarks in Face-api.js

I need to customize the pointColor and lineColor in my code, but I'm not sure how to do it. I am using the fast-api.js library and haven't come across any examples of customized Landmarks Styles.

export const drawResults = async (image, canvas, results, type) => {
      if (image && canvas && results) {
        const imgSize = image.getBoundingClientRect();
        const displaySize = { width: imgSize.width, height: imgSize.height };
        faceapi.matchDimensions(canvas, displaySize);
        canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
        const resizedDetections = faceapi.resizeResults(results, displaySize);
    
        switch (type) {
          case 'landmarks':
            faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
            break;
          case 'expressions':
            faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
            break;
          case 'box':
            faceapi.draw.drawDetections(canvas, resizedDetections);
            break;
          case 'boxLandmarks':
            faceapi.draw.drawDetections(canvas, resizedDetections);
            faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
            faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
            break;
          default:
            break;
        }
      }
    };
    

Answer №1

Utilize the drawFaceLandmarks feature in faceapi to create custom drawings with specific line styles, colors, and more.

 // Customize your landmark drawing options
    const drawOptions = {
      drawLines: true, // Turn on line drawing
      lineColor: 'red', // Choose a custom line color
      pointColor: 'blue', // Select a custom point color
    };

Include the drawOptions object when using the drawfacelandmark function: like

faceapi.draw.drawFaceLandmarks(canvas, resizedDetections, drawOptions);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Zend_Form with Jquery for Efficient File Upload Error Handling

After making changes to my JavaScript, the code now looks like this: $('.zend_form input:not([type="file"]), .zend_form textarea').each(function() { data[$(this).attr('name')] = $(this).val(); }); Greetings, I recently watched a ...

Issue with ng-repeat not updating in Meteor and Angular collaboration

(This is not one of those "Oh I forgot $scope.$apply()" problems) Question is: How can I achieve live binding with ng-repeat and a reactive helper function in the controller? Let's focus on the code: index.js: <body ng-controller="AppCtrl as ap ...

I attempted to mock a standalone class method using jest.spyOn, but unexpectedly the real method was executed instead of the mock implementation

Programming Class //Class Definition class User { constructor(){ } getUserData(){ //performs an action without returning anything } } When a button is clicked within a react component, this method gets executed //ReactComponent.tsx handleButtonClick() { ...

Conducting various calculations and showcasing them all on a single webpage

Uncertain about what to name this, but let's see if you understand my question. I have a table on a standard HTML page and I am performing some calculations using Javascript/jQuery. Example: function addThem() { var result; result = userIn ...

The Bootstrap floating label feature is causing a conflict with the jQuery validation labels

I'm currently utilizing the floating label code snippet from Bootstrap 5 documentation, along with jQuery validation. However, I'm experiencing conflicts with both labels when the error message is displayed. Here are some screenshots showcasing ...

Issues encountered when setting up a Context Provider in React using TypeScript

I am currently in the process of setting up a Cart context in my React TypeScript project, inspired by the implementation found here: https://github.com/AlexSegen/react-shopping-cart/blob/master/src/contexts/CartContext.js. I'm encountering some conf ...

Remove information from the database seamlessly without the need to refresh the page

I need assistance with deleting data from a database without having to refresh the page. While my current code works, it still requires the page to be refreshed after deleting a product. I am looking for a solution similar to this Below is the JavaScript ...

Hidden Div on Google Maps no longer concealing

Since early December, the Google map on my site has been working perfectly. However, the other night, I noticed that the map now defaults to open when entering the site and cannot be closed. Strangely, all my Google maps are behaving this way even though n ...

Guide to iterating within a loop with a variable number of iterations above or below the specified amount in JavaScript

I am currently engaged in a project for a small theater group, and I am facing challenges with getting this loop to execute properly. <% include ../partials/header %> <div class="jumbotron jumbotron-fluid"> <div class="container"> ...

Should a React application perform a complete refresh when a file is reloaded?

Recently, I delved into the world of React and learned about one of its key benefits: updating only the necessary DOM elements. However, as I began building an app from scratch, I encountered a situation where every time I saved the .js file, it resulted ...

Discover the steps to seamlessly post images on Twitter with react-share in a ReactJS environment

Having trouble sharing an image on Twitter using react-share. My code looks like this: <TwitterShareButton url={window.location.href} title={props.data.breadcrumb} imageURL={props.data.product_info.image_path} children={<Twitte ...

Visualization with D3 - Putting an image at the heart of a circular chart made with SVG

Is it possible to add an image to the center of a donut SVG in D3 charts using JavaScript? I've been attempting to achieve this but haven't had any success so far. Currently, I have inserted the image in HTML, but it does not align with the cent ...

Caution: The use of <fieldset> inside a <p> tag is not allowed in the TextField Component of Material UI in React JS. Please review and edit accordingly

<div className="textInputTag"> <span className="label">{props.label}</span> <TextField placeholder={placeholder} error={error ? true : false} defaultValue={props.defaultValue} onBlur={onBlur} onInput={on ...

"Efficient Querying with MYSQL XDEVAPI Through Multiple OR (II) Requests

Currently, I am utilizing the XDEVAPI and attempting to incorporate the or(||) statement in JavaScript. However, it appears to malfunction after 1 or/(||) statements have been included. I need to fetch data from the database based on 5 distinct statuses: . ...

Activate Auto Navigation Feature on Mouseover using jQuery

I have a series of divs that cycle automatically to display their contents one after the other every few seconds. The same content is also displayed when the corresponding link is hovered over. The functionality is working correctly, but I would like to ...

After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, t ...

Is it necessary to include a module in another module if it is not utilized in the template?

Is it necessary to import Module2 into Module1 if a component from Module2 is being used in Module1, but only in the typescript and not the template? For instance, as a @ContentChild(Component2) component2 like shown below (Note: both modules are secondary ...

Tips for showcasing my database in real-time using Php, JavaScript, jQuery and AJAX

Is there a way to display my MySQL database in real-time through AJAX without overloading it with excessive queries? I am currently utilizing jQuery's load function, but I suspect there may be a more efficient method. Can you offer any advice or alter ...

Minimal Space Separating Footer Division and Body Element

While there are numerous discussions online about fixing footer alignment issues, I've encountered a unique problem that needs addressing. The issue at hand is a 29px gap between the bottom of the footer and the <body> tag on my webpage, which ...

Problem with Bootstrap 5 rendering on smartphones (certain sections of the design becoming unresponsive, getting cut off, or sticking to the edge of the

Everything works flawlessly on a computer, but here's what happens on a mobile device: Initial appearance: https://i.sstatic.net/r0YA0.png https://i.sstatic.net/fLOIy.png Expected appearance: https://i.sstatic.net/j8KJf.png https://i.sstatic.net/o ...