Issues arise when Typescript fails to convert an image URL into a base64 encoded string

Question

Issues arise when Typescript fails to convert an image URL into a base64 encoded string

My current challenge involves converting an image to base 64 format using its URL.

This is the method I am currently using:

convertToBase64(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

// Attempting to convert an image from its URL to base 64 format using the function above
this.convertToBase64('https://live.mystocks.co.ke/research/images/bamburi.jpg');

Unfortunately, this approach fails to produce the desired results.

I need help in identifying what might be going wrong and how I can successfully achieve the conversion.

angular typescript

Answer 1

Answer №1

In order to extract image information from a string, the image must first be loaded. To achieve this, you will need to implement either an Observable or a Promise:

fetchImageData(img:HTMLImageElement) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}



getImageDataFromURL(url:string) {
  return Observable.create((observer:Observer<string>) => {
    let img = new Image();
    img.src = url;
    if (!img.complete) {
      img.onload = () => {
        observer.next(fetchImageData(img));
        observer.complete();
      };
      img.onerror = (err) => {
        observer.error(err);
      };
    } else {
      observer.next(fetchImageData(img));
      observer.complete();
    }
  });
}

Answer 2

In order to extract image information from a string, the image must first be loaded. To achieve this, you will need to implement either an Observable or a Promise:

fetchImageData(img:HTMLImageElement) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}



getImageDataFromURL(url:string) {
  return Observable.create((observer:Observer<string>) => {
    let img = new Image();
    img.src = url;
    if (!img.complete) {
      img.onload = () => {
        observer.next(fetchImageData(img));
        observer.complete();
      };
      img.onerror = (err) => {
        observer.error(err);
      };
    } else {
      observer.next(fetchImageData(img));
      observer.complete();
    }
  });
}

Issues arise when Typescript fails to convert an image URL into a base64 encoded string

Answer №1

Similar questions

Using Typescript with Vue.js: Defining string array type for @Prop

What is the best way to deploy static Angular builds for microservices on AWS S3 and ensure proper routing management?

Ensure that the background view remains interactive while adding an overlay on top for an enhanced user experience

I can't seem to understand why the error "bash: ng: command not found" keeps popping up even though I

Turn TypeScript - Modify type properties to reflect types of their descendants

Developing a Gulp buildchain: Transforming Typescript with Babelify, Browserify, and Uglify

Typescript: Implementing the 'types' property in a function returned from React.forwardRef

Disabling a text area or mat-form-field within the same HTML file in Angular 9

Implementing an interface in TypeScript and assigning it a value using generics?

Struggling to link JSON data with Angular 2 class objects

Tips to decrease the bundle size of Angular 2 with WebPack

Eliminate pipe operators from RXJS Observables

Guide on Validating Several Email Addresses in a React Form using Angular 4

An issue with the "req" parameter in Middleware.ts: - No compatible overload found for this call

Utilizing the validator in Vue with the setup script, TypeScript, and the composition API

Mapping two objects of the same shape to each other recursively using TypeScript

Combining union types with intersection operators in Typescript

Invoke a function within a component, within that very component

Angular - ngbDropdownMenu items are hidden from view, but their presence is still detectable

Transmit information from child to parent as needed using @input and @output in Angular 2