4

I have a script that creates dynamic SVG graphics from a data query. I need to stick 'em in a PDF, I'm using jsPDF for this. Unfortunately, jsPDF's own addSVG doesn't seem to work so I've spent some time trying to convert the SVGs to PNGs, using canvas.

I seem to be getting the SVG data URI plugged into an img object ok, but when I try to draw it to the canvas, I get the 'unexpected property or method' error in IE11.

I've tried the following:

img.onload = function () {
    ctx.drawImage(img,0,0);
}

img.onload = function () {
    try {
        ctx.drawImage(img,0,0);
    }
    catch (err) {
        setTimeout(ctx.drawImage(img,0,0),1);
    }
}

img.addEventListener("load", function () {
    ctx.drawImage(img,0,0);
}

img.addEventListener("load", function () {
    try {
        ctx.drawImage(img,0,0);
    }
    catch (err) {
        setTimeout(ctx.drawImage(img,0,0),1);
    }
)}

The last one seems to be the most reliable and using addEventListener comes right from the MSDN; however it will still occasionally throw the same error. I've also taken to declaring my canvas in my html directly, and I've tried various times for setTimeout().

Is there any foolproof way to make sure this works in IE11?

edit: To clarify, var ctx = canvas.getContext('2d') is only a line or two above img.onload or img.addEventListener. Interestingly the MSDN doc here has ctx declared inside, i.e. img.addEventListener("load", function () { var ctx = canvas.getContext('2d'); ... }

The error is always 0x8000ffff - JavaScript runtime error: Unexpected call to method or property access. and the debugger highlights the ctx.drawImage line.

nighliber
  • 769
  • 7
  • 12
  • 1
    Are you sure that `ctx` already exists when the image is loaded? I think we need more details to reproduce the scenario, and the complete error message you are seeing. – Pablo Lozano Oct 01 '15 at 15:45
  • Good point. I am declaring it the same way every single doc I've found so far says to, but I'm currently testing with an additional onload for ctx. If it doesn't break today then it'll at least be better. – nighliber Oct 01 '15 at 15:54
  • I updated with some more info. – nighliber Oct 01 '15 at 16:03
  • `img.load` doesn't exists before you set it, I assume you were looking for `img.onload`, unrelated but you're wrongly using `setTimeout`, here you call it directly and only the returned value of the function is delayed (here it is `undefined`), I assume there are other issues in your code, but I also assume that my answer on [your other question](http://stackoverflow.com/questions/32895732/trying-to-draw-svg-to-canvas-why-is-my-svg-xml-getting-truncated/32899845) will solve the problem you got here too. – Kaiido Oct 02 '15 at 03:17
  • You're right, I meant onload. I'm using setTimeout according to an article I found and it seems to match the docs, if you have a better recommendation I'd very much like to see it. Unfortunately your answer doesn't solve my problem. – nighliber Oct 02 '15 at 04:10
  • It's worth mentioning that so far just adding onload to ctx has been successful. – nighliber Oct 02 '15 at 04:11
  • 1
    @nighliber. Yep, Drawing SVG will taint the IE canvas which prevents `.toDataURL`. No easy workaround either. :-(( – markE Oct 02 '15 at 17:21

0 Answers0