Using Jimp to load a font and retrieve its Base64 representation

I am currently working in Angular with Jimp, attempting to overlay text onto an existing image. However, the image is not updating as expected.

const Jimp = require('jimp')

var _this = this;
  
Jimp.read("assets/TimeLine.png").then(function (image) {
  
  Jimp.loadFont("assets/1.fnt").then(font => {
    image.print(font,10, 10,'Hello world that wraps!', 12);
  });

  image.getBase64(Jimp.MIME_JPEG, function (err, src) {
    var img = document.createElement("img");
    img.setAttribute("src", src);   
                  
    _this.timelineStrings = src.toString();    
  });
  
}).catch(function (err) {
    console.error("! "+ err);
});
  
}

Answer №1

Apologies, I have identified my error.

let Jimp = require('jimp')

var _this = this;
 
  
Jimp.read("assets/TimeLine.png").then(function (image) {
  
  Jimp.loadFont("assets/1.fnt").then(font => {
    image.print(font,10, 10,'Hello world that wraps!', 12)
      .getBase64(Jimp.MIME_JPEG, function (err, src) {
        var img = document.createElement("img");
        img.setAttribute("src", src);   
                  
        _this.timelineStrings = src.toString();    
    });
  });

  
  
  }).catch(function (err) {
    console.error("! "+ err);
  });
  
}

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

Utilize puppeteer and web-vitals in NextJS to retrieve the web performance metrics of a website

I'm currently working on a basic tool in NextJS that uses puppeteer to fetch web vitals data from a given URL. However, I'm facing an issue where the results are not being printed out. What could be causing this problem? const browser = await pup ...

Angular examine phrases barring the inclusion of statuses within parentheses

I require some assistance. Essentially, there is a master list (arrList) and a selected list (selectedArr). I am comparing the 'id' and 'name' from the master list to those in the selected list, and then checking if they match to determ ...

Display text when hovered over or clicked to insert into an HTML table

I have an HTML table connected with a component field gameArray and I need it to: Show 'H' when the user's cursor hovers over TD (:hover) and the corresponding field in gameArray is an empty string, Fill the gameArray field after a click. ...

Convert JSON data into an array of strings that are related to each other

I'm encountering an issue with converting JSON into a string array I must convert a JSON into a string array to dynamically INSERT it into our database, as I need this to work for any type of JSON without prior knowledge of its structure. Here is th ...

Sending data from child components to parent components in Angular

I'm facing an issue with retrieving data from a child array named store within user data returned by an API. When trying to access this child array in my view, it keeps returning undefined. Code export class TokoPage implements OnInit { store= nu ...

Having trouble using the search feature on ngx-mat-select-search for typing?

I am experiencing an issue with searching while using ngx-mat-select-search. I am able to display the options, but when I try to type in a search query, nothing appears on the screen. Can anyone provide assistance? Below is the code snippet: <div *ng ...

Retrieving Files from POST Request Body Using Node.js and Angular

Currently, I am developing a MEAN Stack application and facing an issue while handling a form that should allow users to upload a file upon submission. The process seems to work seamlessly on the client side; however, when I inspect the request body after ...

Error: Unable to access the 'visitStatement' property of an undefined object within Angular 2

Help! I encountered an error in my angular2 application. The error message says: TypeError: Cannot read property ‘visitStatement’ of undefined ...

Personalize the md-tab component in Angular 2

I'm encountering an issue with styling the md-tab component in Angular 2. While I understand that Angular 2 Materials is currently under development, I am wondering if there is a way to customize it, such as removing the bottom-radius. Below is an exa ...

Encountering an issue while trying to deploy my node.js application on Heroku

While monitoring the Heroku logs using the command heroku --tail, I encountered the following error: Error: 2022-01-25T19:10:06.153750+00:00 app[web.1]: at emitErrorCloseNT (node:internal/streams/destroy:122:3) 2022-01-25T19:10:06.157055+00:00 heroku[rout ...

Utilizing TypeScript to export a class constructor as a named function

Imagine you have this custom class: export class PerformActionClass<TEntity> { constructor(entity: TEntity) { } } You can use it in your code like this: new PerformActionClass<Person>(myPersonObject); However, you may want a more co ...

Validate that the input is an array

Looking for a way to determine if a function parameter is an array or not, and then process it accordingly. If the parameter is not an array, convert it into an array before performing the desired function. For example: interface employee { first: st ...

Exploring techniques to retrieve data from Json Array in Angular using Firebase documentation

this.currentUser$=this.afs.doc('users/'+this.authState.uid).valueChanges().pipe(); When I include it in my component.html file like this: {{ currentUser$|async|json}} The output I get is as follows: { "photoUrl": "", &qu ...

Is it possible to utilize the NX CLI for managing both Angular and React applications within the same Nx workspace?

When attempting to set up my workspace, I encountered some errors. To start, I created an Nx workspace by running: npx create-nx-workspace@latest myworkspace, and then chose Angular CLI as the option. Next, I generated an Angular app using the command: y ...

Tips for fixing TypeScript compiler error TS2339: Issue with accessing 'errorValue' property in Angular 5 project

Within a component, I have developed a function to manage errors returned from a Rest Service and determine the corresponding error message to display to the user. This method accepts an error object (custom data structure from the service), navigates to e ...

Error Message: The Query<DocumentData> type cannot be assigned to the DocumentReference<DocumentData> parameter

Currently, I am attempting to execute a query against Firestore data. Here is my code snippet: import { collection, getDoc, query, where } from "firebase/firestore"; import { db } from "../../utils/firebaseConfig"; const getQuery = a ...

Sonarqube coverage report is missing in Gitlab CI, but it works fine when running locally

I have encountered an issue with my Angular application deployed via GitLab CI. The deployment to the hosted Sonarqube instance is successful, but none of the code coverage reports are appearing unfortunately. Below is my GitLab yml file: stages: - te ...

"Implemented a fresh pathway within the app-routing.module.ts file, but unfortunately, ngxAdmin is experiencing functionality issues

While customizing the ngx-admin template, I attempted to incorporate a new module into the app module and added its route in app-routing.module.ts. However, upon trying to open it, the module seems to be stuck at loading without any errors appearing in the ...

Combine an array of arrays with its elements reversed within the same array

I am working with an array of numbers that is structured like this: const arrayOfArrays: number[][] = [[1, 2], [1, 3]]; The desired outcome is to have [[1, 2], [2, 1], [1, 3], [3, 1]]. I found a solution using the following approach: // initialize an e ...

What steps should I take to successfully compile my Typescript Webpack project without any errors?

Currently, I am attempting to convert only two .js files into .ts files within my webpack node.js project and then compile them (actions.ts and flux.ts). When I execute the command: webpack --progress --colors I encounter the following errors: 'use ...