I am using html-to-image library to convert div element to image, which is working fine for single div, but if i use it for divs in for loop then it breaks
<div *ngFor="let template of templates; index as i">
<div id="{{template.templateName}}_front_{{i}}" [innerHTML]="(template.templateHtmlFront) | safeHtml">
</div>
<div id="{{template.templateName}}_back_{{i}}"
[innerHTML]="(template.templateHtmlBack) | safeHtml"></div>
</div>
I want to convert each front and back template in an image. so i have written following code in ts file
async createFiles() {
const imageData: any[] = [];
for (let tempIdx = 0; tempIdx < this.templates.length; tempIdx++) {
const containerFront = document.getElementById(`${template.templateName}_front_${tempIdx}`);
//save front template
if (containerFront) {
await htmlToImage.toJpeg(containerFront)
.then((dataUrl) => {
const imageName = `${template.templateId}_front.jpeg`;
const imageBlob: Blob = this.service.dataURItoBlob(dataUrl);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' });
imageData.push(imageFile);
}).catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
//Save back
const containerBack = document.getElementById(`${template.templateName}_back_${tempIdx}`);
if (containerBack) {
await htmlToImage.toJpeg(containerBack)
.then((dataUrl) => {
const imageName = `${template.templateId}_back.jpeg`;
const imageBlob: Blob = this.service.dataURItoBlob(dataUrl);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' });
imageData.push(imgFile);
}).catch(function (error) {
console.error('oops, something went wrong!', error);
});
}
}
}
}
This works fine for max 10 to 15 record, but of templates size is more than 15 then application hangs(or crashes). For 10-15 records also it takes 15mins(which is very slow) Is there any better way to make it work?
