javascriptangularimagewkhtmltoimage

Angular 6 dom-to-image throws uncaught error (Can't convert html to image)


I want to convert html section into image(Note Html section has many other images from server) I am using angular 6 and node.js and library for converting html to image is dom-to-img

It is working in localhost But when I test it into Production level it gives me error That is in picture Error

Here is HTML Area that I want to convert into an image in which signature and back blue color coming from the server as URL

Html Area

i used @ViewChild('checkContainer') container; to get dom(Html section) reference and then i'm calling a function that gives me an image type file and I pass to the server that saves this image in Database. All is working in Localhost but not in production

Here is the code I have tried.

async convertToImage(fileName) {
try {
  const blob = await domtoimage.toBlob(this.container.nativeElement);
   this.checkImageFile = new File([blob], fileName + '.png', {
     type: 'image/png'
   }); // image File
} catch (error) {
  console.log('ops error', error);
}

}

and above function will call from this function checkImageFile is property name that is declared in my file.

async addCheck() {
const fileName = this.checkModel.checkNumber;
await this.convertToImage(fileName);
if (this.checkImageFile) {
  console.log(this.checkImageFile);
} else {
  console.log('dom to image is not working properly');
}

}

What is missing in my code? can you please help me? Thank you all Happy Coding.:)


Solution

  • It is a compatibility issue with this package you can use the following package instead dom-to-image-more