getDataURL parameters useBgImage doesn't seems to work

[mitjana]

Hello,
Thanks for your package, it is pretty easy to use and understand.

I need to save the background as well as the drawing on it so I set the parameter useBgImage to true but this doesn't seems to work.

I looked into the source code for the getDataURL but the function called by this.drawImage doesn't seem to do anything to the export, on the other hand I saw you import another function called drawImage that could achieve what I what need but it is not used in index.js.

Could you help me with this issue ?

[IslamIv]

any updates here?

[wondem12]

any updates here?

[mitjana]

Yes as I thought the function called was the bad one, if i remember well you just need to remove "this." in the this.drawImage :
index.js line 200 :
drawImage({ctx: context,img: this.props.imgSrc,x: 0,y: 0,w: this.props.canvasWidth, h: this.props.canvasHeight});
I don't know how to do a pull request but I'll try posting one.

[tiagoapp]

Yes as I thought the function called was the bad one, if i remember well you just need to remove "this." in the this.drawImage : index.js line 200 : drawImage({ctx: context,img: this.props.imgSrc,x: 0,y: 0,w: this.props.canvasWidth, h: this.props.canvasHeight}); I don't know how to do a pull request but I'll try posting one.

Can you please explain exactly how / where you did edit this in other to get it to work? I've looked into the node_modules for an index.js but couldn't manage it... thanks

[apenab]

any updates here?

[skuntze]

Still not working. Any updates?

@mitjana Could you please share your modified index.js file with the solution? I could create the PR then... Thanks! 🙂

[skuntze]

@embiem I am currently investigating what is happening when getting the image data with the background.

Disclaimer: I haven't really worked a lot with canvas elements ✌️

In the index.js on line 178, you save the reference to the canvas.

let canvasToExport = this.canvas.drawing;

In total, the library uses four canvas instances.

I found out that the background image is part of the canvas with the name "grid".

Is this a reason why the background image is not part of the canvas we are trying to save?

I hope that is somewhat clear.

[mitjana]

Hello,
I just made a pull request with the line modified. Check PR #141

I hope it can help you.

[skuntze]

@mitjana Thank you so much for creating the pull request ✌️ I've just tested it locally and I am getting the following runtime error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. drawImage.js:63

How did you solve this issue?

@embiem Could you please have a look at the issue? I really like your library and would love to integrate it into our project fully. But this feature would be required for us. Please let me know if you need further details!

[MaximeYunow]

Hi there,

@skuntze I think you may have a clue concerning the canvas ref at line 178 in index.js. Seems like we get only the drawings but not the bgImage as it is drawn on the canvas grid. I'm no expert but it looks like a good lead, right ?

@embiem I really appreciate your work on this library. I would like to use background image in my project too but as it's still not working...
Let us know if we can help to fix that quickly !
Thanks again

[Jucesr]

Hi there.

I had the same problem so I made this.

https://codesandbox.io/s/canva-with-background-image-uf652c