html2canvas: html2canvas is not able to capture a SVG in IE11.

Specifications:

html2canvas version tested with: 1.0.0-alpha.10
Browser & version: Internet Explorer 11 & Version: 11.309.16299.0
Operating system: Window 10

Bug reports:

Problem html2canvas is not able to capture a SVG in IE11.

Steps to reproduce Please see jsFiddle: https://jsfiddle.net/coolbean/ekshfuLz/17/

install html2canvas and es6promise

 var Promise = require('es6-promise').Promise;
 import html2canvas from "html2canvas";

Calls html2canvas on a DOM with SVG tag

html2canvas(SVGsource).then(function(canvas) {
  document.body.appendChild(canvas);
});

When I tried above in Chrome, html2canvas finished loading “1” images. However, IE11 finishes loading “0” images.

As a result, the produced canvas is empty.
There is no error log, so I assume that this problem might be from incompatible syntax of SVG tag.

About this issue

Original URL
State: open
Created 6 years ago
Comments: 18

Most upvoted comments

I have updated to use 1.0.0-rc.5. but still not working. Mr. Bill Gates can you please announce end-of-support to IE immediately? I can then give it up…

ninjago2015 on Oct 9, 2019

This is still an issue in 1.0.0-rc.1. IE11 doesn’t see highcharts (svg canvas) while Chrome and Firefox do.

Lemonilla on May 13, 2019

@kuldip27792 use canvg first, and then use html2canvas

fiftyk on Nov 15, 2019

It is still not working in ie 11.Below is the Code I am using.

let data = document.getElementById(‘contentToConvert’); html2canvas(data, { onrendered: function (canvas) { let imgWidth = 208; let pageHeight = 295; let imgHeight = canvas.height * imgWidth / canvas.width; let heightLeft = imgHeight; const contentDataURL = canvas.toDataURL(‘image/png’) let pdf = new jspdf(‘p’, ‘mm’, ‘a4’); // A4 size page of PDF
let position = 0; pdf.addImage(contentDataURL, ‘PNG’, 0, position, imgWidth, imgHeight) pdf.save("testf .pdf’); // Generated PDF
} });

satish1020 on Oct 2, 2018

yup, like ahmeturun, this is what I do as well. Attached is my TypeScript function to make svgs render onto the screenshot: ` import { Canvg } from ‘canvg’; … private convertSvgD3ChartsToPngs(): HTMLImageElement[] { const pngD3Charts: HTMLImageElement[] = [];

Array.from(document.getElementsByTagName(‘svg’)).map(svg => { let svgD3ChartCanvas = document.createElement(‘canvas’);

        // Increase the Pixel Density for the Screenshot
        svgD3ChartCanvas.width = parseInt(svg.getAttribute('width')) * 4;
        svgD3ChartCanvas.height = parseInt(svg.getAttribute('height')) * 4;

        let canvasContext = svgD3ChartCanvas.getContext('2d');

        // Use Canvg to convert the svg into a png
        let convertedSvgToPng = Canvg.fromString(
            canvasContext,
            (svg.parentNode as HTMLElement).innerHTML,
            {
                ignoreDimensions: true,
                scaleWidth: svgD3ChartCanvas.width,
                scaleHeight: svgD3ChartCanvas.height
            }
        );
        convertedSvgToPng.start();

        // Attach new png
        let pngD3Chart = new Image();
        pngD3Chart.src = svgD3ChartCanvas.toDataURL('image/png');
        pngD3Chart.style.width = '100%';
        pngD3Charts.push(pngD3Chart);

        // Remove HTML Attribute and use CSS
        (pngD3Chart as any).width = '';
        svg.parentNode.parentNode.appendChild(pngD3Chart);
        (svg.parentNode as HTMLElement).style.visibility = 'hidden';
        (svg.parentNode as HTMLElement).style.height = '0';
        (svg.parentNode as HTMLElement).style.minHeight = '0';
    });
    return pngD3Charts;
}`

upuxaa on Aug 28, 2020

@fiftyk I’ve tried your solution and it worked great. so what I’m doing is I’m collecting all the svg elements and rendering them to the canvas created by html2canvas with their own position values. Thanks a lot brother.

ahmeturun on Dec 31, 2019

I have the same issue and it’s not working in IE 11. What I try to do is to generate the PDF file for the report page with some highchart graphs (which is svg). I am using html2canvas and jspdf. when I switch the version from html2canvas@1.0.0-alpha.10 to html2canvas@0.5.0-beta4, it can show the highchart graph, but there are others issues like layout. If I use html2canvas@1.0.0-alpha.10, all the highchart graph will be empty when generate canvas.

I am looking forward to the new release with this fix.

tonyxg-dnv on Apr 26, 2019