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

Unable to send messages despite successful connection through Sockets.io

My Java Server is set up to listen for messages from an Ionic 2 Client using Sockets.io. The server can successfully send messages to the client, but I am facing issues with getting the client to send messages back to the server. For example, when the jav ...

Angular can be used to compare two arrays and display the matching values in a table

Having two arrays of objects, I attempted to compare them and display the matching values in a table. While looping through both arrays and comparing them by Id, I was able to find three matches. However, when trying to display these values in a table, onl ...

Utilizing Nginx to route to various locations with distinct root paths in an Angular server-side rendered build

My website is up and running on the server, hosted at http://example.com. It was built using Angular and I deployed the dist folder containing the code to /opt/example_web/dist/browser on the server. The site is redirecting and loading successfully. I als ...

Typescript classes implementing data hydration and dehydration techniques

Exploring ways to share TypeScript classes or interfaces between a React + TS frontend and node + TS backend. Converting class instances into JSON poses a challenge as TS types are removed during compile time. Considering options for defining objects in a ...

Migrating image information from Angular version 14 to Asp.Net Core 6.0 Rest Api

When transferring product model data from Angular to a REST API using FormData, there is an images array included in the product data. Upon receiving this product in the REST API, the images data is accessed using Request.Form.Files. The images are then se ...

What is the purpose of the .default() method being added to the class constructor in transpiled Typescript code

In TypeScript, I have the following code snippet to create an instance of ConnectRoles Middleware in Express: let user = new ConnectRoles(config); The middleware initialization is expected to be a simple call to a constructor. However, after transpiling, ...

Retrieve HTTP status code within Angular 2 component from a Service

I encountered an issue while trying to return an object from my Http Service's catch block to my component: Below is the code snippet from my service: login(username,password){ let headers = new Headers(); headers.append('Conten ...

Perform validation on input by monitoring checkbox changes in Angular 4

I am currently working on a project where I need to loop through an array of key values in order to create a list of checkboxes, each accompanied by a disabled input field as a sibling. The requirement is that upon checking a checkbox, the corresponding in ...

Adjusting the timeout for a particular operation according to its unique identifier

I am looking for a solution to call a method that posts an answer after an input change in my Angular project. I want to reset the timeout if another input change occurs to avoid multiple posts. Is there a smart way to achieve this? My project involves po ...

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

I am attempting to recreate the Backup Codes feature of Google by generating four random 8-digit numbers. for(let i = 0; i < 4; i++) { let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000); backendCodes.push(back ...

The process of expanding a nested node in the Angular Material tree with deeply nested data

Within my Angular 7 application, I am utilizing a mat tree structure that contains nested array objects. The goal is to automatically expand specific nested sections after users make changes to the data within those sections. While I have successfully exp ...

How to dynamically generate Angular component selectors with variables or loops?

Looking to dynamically generate the Selector Tag in my app.component.html using a variable. Let's say the variable name is: componentVar:string What I want in my app.component.html: <componentVar></componentVar> or <app-componentVar& ...

encountering an error of unsupported grant type while attempting to authenticate a user

I've seen a lot of discussions on this topic, but none have addressed my specific issue. Currently, I am working on an angular 5 application and trying to retrieve an authentication token by sending a post request to a server. Testing the connection ...

Each property of an object has its own unique key, yet they all share the same data type

I have a single-use object with only three properties, all of which should be of the same type. The code below currently achieves this, but I'm curious if there is a more efficient way to declare the type for timingsObject: let timingsObject: ...

Issue with esbuild not executing within docker compose configuration

Currently, I am new to using esbuild and struggling to set up a script that can watch and rebuild my files. Additionally, I need this functionality to work within a docker environment. Within my package.json file, the following scripts are defined: " ...

How can we import the entire Jasmine library using CucumberJS?

I am currently trying to implement unit testing using Jasmine and CucumberJS in my Angular v9 application. I have followed the tutorial provided by cucumber.io to set up cucumber as the default runner. However, I am facing difficulties in using Jasmine met ...

Understanding the complexity of defining the type of a function can be challenging. If you're tasked with a complicated function, determining its type

Let's break it down: Dict is defined as { [key: string]: () => any } The desired return value is represented by X I am attempting to create a type for a function that: Takes in a dictionary Dict T Returns an X Now, X also functions as a functio ...

When attempting to update Ionic2 from BETA11 to RC0, the error "bundle failed: 'InMemoryBackendService' is not exported" was encountered

An error occurred while bundling the application: 'InMemoryBackendService' is not exported by node_modules\angular2-in-memory-web-api\index.js (imported by src\app\app.module.ts). For assistance with resolving this ...

Tips for efficiently inserting large amounts of data using a select subquery

I'm currently using Sequelize in my project and encountering difficulties in converting a simple query into Sequelize syntax. Furthermore, I am also exploring ways to efficiently perform bulk inserts for this particular query. The query in question i ...

Lazy loading in Angular 2 hits a snag when using a module that is shared

After successfully lazy loading my AccountModule, I encountered an issue when adding my SharedModule to it. All of my eagerly loaded modules seemed to be forgotten and I started receiving the following error: The component FoodComponent is not part of a ...