Angular pass a method to a service

Question

I am using Angular 12 and I have a method that takes a screenshot of an element. It works, but I want to call it from a service.

Here is the code:

import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';

...

takesshotOfElement(elementId: any) {
    const element = document.getElementById(elementId) as HTMLCanvasElement;
    html2canvas(element).then((canvas) => {
      canvas.toBlob((blob: any) => {
        saveAs(blob, "filename.png");
      });
    });    
}

How do I go with putting this method in a service so I can call the service instead and make the method cleaner?

@Apoorva please don't use inline code for emphasis. – jonrsharpe Oct 25 '21 at 12:25 — jonrsharpe, Oct 25 '21 at 12:25

Apoorva Chikara · Accepted Answer · 2021-10-25T13:35:21.370

1

You can create a service and add this method. Now, the processing for screenshot might take time and you don't want the main thread to wait for it, so make it async and return the promise from the method.

takesshotOfElement(elementId: any) {
    const element = document.getElementById(elementId) as HTMLCanvasElement;

    return new Promise( async (resolve, reject) => {
          try {
             const canvas = await html2canvas(element);
                   canvas.toBlob((blob: any) => {
                   saveAs(blob, "filename.png");
                   // once the things are done
                   resolve('Blob is completed');
             });  
          } catch (e){
             reject(e);
          }
    })   
}

The component where you want to call it, you can use async/await or then/catch. This way whenever you call this method, it will update the things based on the processing done for snapshot.

edited Oct 25 '21 at 13:35

answered Oct 25 '21 at 12:23

Apoorva Chikara

8,277
3
20
35

I'm getting 2 errors when I put the code in the service ... 1 = Expected 1-3 arguments, but got 0.ts(2554) - This line: const blob = canvas.toBlob(); and 2 = No overload matches this call. in this line: saveAs(blob, "filename.png"); ... The first error is in: toBlob and the second in blob – deszok Oct 25 '21 at 12:32
Check now, I have made the changes. – Apoorva Chikara Oct 25 '21 at 12:35
Ok, those errors are gone but another issue appeared... with canvas...2 error: 'canvas' is declared but its value is never read.ts(6133) Cannot redeclare block-scoped variable 'canvas'. – deszok Oct 25 '21 at 12:38
You can check now, it will work. – Apoorva Chikara Oct 25 '21 at 13:35

score 0 · Answer 2 · answered Oct 25 '21 at 13:07

I've created a sample service snippet below:

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class DummyService {

  constructor(
    @Inject(DOCUMENT) private document
  ) { }

  takesshotOfElement(elementId: any) {
    const element = this.document.getElementById(elementId) as HTMLCanvasElement;
    html2canvas(element).then((canvas) => {
      canvas.toBlob((blob: any) => {
        saveAs(blob, "filename.png");
      });
    });
  }
}

You can invoke this service in component as below:

constructor(
    private serivce: DummyService
  ) {

  }

  ngOnInit() { //or in any method you want
    this.serivce.takesshotOfElement('test');
  }

I get an error: Parameter 'document' implicitly has an 'any' type. in the service...any ideas? — deszok, Oct 25 '21 at 14:41
That's a type error: https://stackoverflow.com/a/44189230/1520750. This is the more 'angular' way to achieve your requirement. — Krishna Mohan, Oct 27 '21 at 06:55

Angular pass a method to a service

2 Answers2