How to use "canvas?.toDataURL('image/png')" as Image source?

[hbinkle]

Hi,
I'm using bwip-js to render barcode and qrcode in react.
Now I need them in the PDF too, but I can't get it to work.
bwip-js needs a canvas element to render: https://github.com/metafloor/bwip-js#react-usage
This works fine. But how can render such an canvas using an Image element of react-pdf?
In all my attempts I'm unable to get a proper canvas to call .toDataURL('image/png') on which can be used further on.
Can someone point me into the right direction or even give an example?

Thanks!

[kidroca]

I've used something similar to render SVGs on a web page as Images inside a PDF

If you already have the canvas rendered somewhere all you need to do is pass the url returned by canvas.toDataURL as <Image source={url} />

If you don't have it rendered you can try rendering on the fly and provide the result to the Image
The source can be a Promise returning function

Something like this should work

import { Image } from '@react-pdf/renderer';
import bwipjs from 'bwip-js';

export const BarcodeImage = (props) => (
  <Image source={() => getBarcodeUri(props)} />
);

const getBarcodeUri = async (props) => {
        const htmlCanvas = document.createElement('canvas');
        htmlCanvas.width = 120;       // I'm not sure about width and height values
        htmlCanvas.height = 120;
        
        let canvas = bwipjs.toCanvas(htmlCanvas, {
                bcid:        'code128',       // Barcode type
                text:        '0123456789',    // Text to encode
                scale:       3,               // 3x scaling factor
                height:      10,              // Bar height, in millimeters
                includetext: true,            // Show human-readable text
                textxalign:  'center',        // Always good to set this
            });
            
       return htmlCanvas.toDataURL('image/png', 1.0);
}

You can use props to customize whatever you need

It doesn't actually look like anything async is happening so you ca probably just pass
the result: <Image source={getBarcodeUri(props)} />

In case you have the canvas already rendered somewhere the logic is simpler

export const BarcodeImage = (props) => (
  <Image source={getBarcodeUri(props)} />
);

const getBarcodeUri = async (props) => {
       const htmlCanvas = document.getElementById('myCanvas');
       return htmlCanvas.toDataURL('image/png', 1.0);
}

Another way would be to pass the htmlCanvas as a ref

export const BarcodeImage = ({ canvasRef, ...props }) => (
  <Image source={canvasRef.toDataURL('image/png', 1.0)} />
);

[hbinkle]

Great, that's it.
I always thought the canvas needs to to be rendered somewhere in the visual tree.
But this simply works.
Thanks a lot!