CODEWITHSUNDEEP
javascriptinternet-explorersvg
Karan
Karan

Reputation: 1118

Your browser has tainted the canvas in internet Explorer

I am creating a project using AngularJS. In my project, I am downloading the pdf which has some data and canvas. This pdf is complete on all browsers except internet explorer. In the Internet Explorer am getting Your browser has tainted the canvas in Internet Explorer

In my pdf canvas is not drawing.Here is my code:

    var canvasArr = [];
    $("svg").each(function(index) {

        arr.push(this)
        var parent = this.parentNode;
        var thisData = this
        var svgLength = $("svg").length;
        var id = $(this).attr('id')
        SVG2Bitmap(this, function(canvas, dataURL) {

            canvas.id = "canvas_" + id;
            canvasArr.push(canvas)
            parent.replaceChild(canvas, thisData);
            var image1, image2, image3,image4,image5 = null;
             var p2 =  new Promise(function (resolve, reject) { 

                 html2canvas(html, {
                      onrendered: function(canvas) {
                          image1 = canvas.toDataURL();
                          resolve(image1)
                      }
                  });
             });
              Promise.all([p1,p2,p3,p4,p5]).then(function(image){
                var docDefinition = {
                    header: {
                      margin: 10,
                      columns: [

                      ]
                  },
                    content: [{
                        image: image[0],
                        width: 500,
                    }],
               }) 
              pdfMake.createPdf(docDefinition).download('price-calculation-' + $scope.getDateTimeFormat("YYYY-MM-DD-hh:mm:ss") + '.pdf');
         })

        })

Here is the library which is using to convert SVG to a canvas.

https://github.com/Kaiido/SVG2Bitmap

Upvotes: 2

Views: 311

Answers (1)

mootrichard
mootrichard

Reputation: 3611

It was already mentioned in the comments, but this does seem to primarily be an issue with Internet Explorer. You say that your PDF canvas is not drawing, but the library that you're using is drawing on a canvas. They even have comments in the code highlighting some of the issues around Internet Explorer.

As mentioned in the linked question, you might follow the advice of one those answers for handling IE issues. That might not actually help though, since its really the library that you're using that is causing the issue.

If you're not looking for a strictly client-side solution, you might also want to consider proxying the URL for the PDF to avoid the issues with IE as well.

Upvotes: 2

Related Questions