Html2canvas: How to run html2canvas synchronously ?

Created on 16 Jul 2015 · 5Comments · Source: niklasvh/html2canvas

I know doing anything synchronously is not "in" nowadays but I think it's inevitable for what I was asked to do. so my question is, can I ask the converter to do it synchronously? thanks

Source

tfnsw-spatial

Most helpful comment

I had a task to export 9 charts which was displayed in 9 separate division,
To export all charts i used html2canvas function, i wanted to export each graph in each pdf sheets with a4 size
below is my logic to extract all 9 charts on one click,
I am using angular 2(now 6) framework.

On click i ll execute generateAllPdf() function,
I ll gather all 9 id's from my html collection,
iterate through each id and call html2canvas function,
as html2canvas runs in background to process images, i m using
await on function,
after the html2canvas completes its process, i ll save the
document,
If suppose i wont use await i ll end-up in downloading an empty
page.

below is my code logic,

// As All Functions in js are asynchronus, to use await i am using async here
 async generateAllPdf() {
    const doc = new jsPDF('p', 'mm', 'a4');
    const options = {
      pagesplit: true
    };
    const ids = document.querySelectorAll('[id]');
    const length = ids.length;
    for (let i = 0; i < length; i++) {
      const chart = document.getElementById(ids[i].id);
      // excute this function then exit loop
      await html2canvas(chart, { scale: 1 }).then(function (canvas) { 
        doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 50, 200, 150);
        if (i < (length - 1)) {
          doc.addPage();
        }
      });
    }
    // download the pdf with all charts
    doc.save('All_charts_' + Date.now() + '.pdf');
  }

PrashanthGowda on 27 Jun 2018

❤3

All 5 comments

Why? Is not it better to use a callback?

brcontainer on 16 Jul 2015

I want to convert the canvas and put it into a clipboardData of the copy event. But once you try to access the clipboardData and edit its items via setData outside its thread it doesn't take any effect...

tfnsw-spatial on 17 Jul 2015

I believe setData have blocking problems besides synchronized events. Maybe you can use "Flash" (ActionScript3.0) to copy content to the "clipboard".

Like this:

var bitmapData:BitmapData = new BitmapData(400, 50, false, 0);
bitmapData.perlinNoise(10, 50, 3, (Math.random() * 255) | 0, true, true);

Clipboard.generalClipboard.clear();
Clipboard.generalClipboard.setData(ClipboardFormats.BITMAP_FORMAT, bitmapData, false);

Before is needed send image from canvas to swf and after use this code.

brcontainer on 17 Jul 2015

On click i ll execute generateAllPdf() function,
I ll gather all 9 id's from my html collection,
iterate through each id and call html2canvas function,
as html2canvas runs in background to process images, i m using
await on function,
after the html2canvas completes its process, i ll save the
document,
If suppose i wont use await i ll end-up in downloading an empty
page.

below is my code logic,

// As All Functions in js are asynchronus, to use await i am using async here
 async generateAllPdf() {
    const doc = new jsPDF('p', 'mm', 'a4');
    const options = {
      pagesplit: true
    };
    const ids = document.querySelectorAll('[id]');
    const length = ids.length;
    for (let i = 0; i < length; i++) {
      const chart = document.getElementById(ids[i].id);
      // excute this function then exit loop
      await html2canvas(chart, { scale: 1 }).then(function (canvas) { 
        doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 50, 200, 150);
        if (i < (length - 1)) {
          doc.addPage();
        }
      });
    }
    // download the pdf with all charts
    doc.save('All_charts_' + Date.now() + '.pdf');
  }

PrashanthGowda on 27 Jun 2018

❤3

I had a task to export 9 charts which was displayed in 9 separate division,
To export all charts i used html2canvas function, i wanted to export each graph in each pdf sheets with a4 size
below is my logic to extract all 9 charts on one click,
I am using angular 2(now 6) framework.

On click i ll execute generateAllPdf() function,

I ll gather all 9 id's from my html collection,

iterate through each id and call html2canvas function,

as html2canvas runs in background to process images, i m using
await on function,

after the html2canvas completes its process, i ll save the
document,

If suppose i wont use await i ll end-up in downloading an empty
page.

below is my code logic,
// As All Functions in js are asynchronus, to use await i am using async here
 async generateAllPdf() {
    const doc = new jsPDF('p', 'mm', 'a4');
    const options = {
      pagesplit: true
    };
    const ids = document.querySelectorAll('[id]');
    const length = ids.length;
    for (let i = 0; i < length; i++) {
      const chart = document.getElementById(ids[i].id);
      // excute this function then exit loop
      await html2canvas(chart, { scale: 1 }).then(function (canvas) { 
        doc.addImage(canvas.toDataURL('image/png'), 'JPEG', 10, 50, 200, 150);
        if (i < (length - 1)) {
          doc.addPage();
        }
      });
    }
    // download the pdf with all charts
    doc.save('All_charts_' + Date.now() + '.pdf');
  }

i had also the same idea.but i used forEach instead of for loop. Like this:
` typescript

    elements.forEach(async (el, index) => {
      const canvasCreated = await html2canvas(el, this.canvasOptions);
      const image = this.convertCanvasToImage(canvasCreated);
      this.add_Image_to_PDF(pdf, image);
      if (index === ( elements.length -1)) resolve("resolved");
    });

`
But interestingly, forEach does not seems to wait for html2canvas. Not sure if its the expected behaviour. So i also switched to for loop which seems to be working.