mnahkies / ng-qrcode

Easy to use AOT compatible QR code generator for Angular projects.
https://mnahkies.github.io/ng-qrcode/
MIT License
53 stars 10 forks source link

Option to render as img instead of canvas? #82

Open awdorrin opened 1 year ago

awdorrin commented 1 year ago

While trying to print a div containing a component, by using document.getElementById('div-to-print').innerHTML, the graphic data in the canvas is not getting copied over. I'm currently using a work around, where I copy the canvas data over, converting to an img tag with a toDataURL.

I was thinking, if ng-qrcode could insert a img tag, instead of a canvas, with a flag. It would make things a lot easier.

Example code:

    let pageContents = document.createElement('div');
    pageContents.innerHTML = document.getElementById(divId).innerHTML;

    const canvas = Array.from(document.getElementsByTagName('canvas'));
    const canvasClone = Array.from(pageContents.getElementsByTagName('canvas'))

    for (var i = 0; i < canvas.length; i++) {
      let img = document.createElement('img');
      img.className = canvas[i].className;
      img.style.cssText = canvas[i].getAttribute('style');
      img.src = canvas[i].toDataURL();
      canvasClone[i].parentNode.replaceChild(img, canvasClone[i]);
    };