Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Exporting canvas to image exports empty image
See original GitHub issueHow can I export the underlying canvas to an image using toDataURL?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
I’ve tried assigning a ref to the <Stage ref={stage => { this.konvaStage = stage }} /> component, but I keep getting an empty canvas image when I try to export the image using this piece of code. How can I accomplish this? Thanks
this.konvaStage.node.bufferCanvas.context.canvas.toDataURL()
Issue Analytics
- State:
- Created 6 years ago
- Comments:32 (6 by maintainers)
Top Results From Across the Web
Solved: "Export as" leading to "image is empty"? - 12621885
Solved: Using a clipping mask as shown to mass export pictures, but the only thing I get is a window telling me that...
Read more >Exporting images as JPG from Clear Canvas Open
Right click on the little thumbnail of your image and select. Export to image. The default is export as JPG. Select OK and...
Read more >Exporting an HTML Canvas as Image - Stack Overflow
I now want to "flatten" this canvas and export it out as a new Image. It's working - but not 100%. The issue...
Read more >On exporting canvas it output an image with empty graphs
When i am using this function to export the canvas graph to image it is giving me empty graph without any data in...
Read more >Exporting images - Literally Canvas
This is probably what you want to do if your image bounds are not infinite. stroke. fill. bg. Clear. <div class="literally export-bounded"></div> <form ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
http://jsbin.com/bevarosibo/3/edit?js,output
let me know if you still have any questions.
i got it working. highly recommend you making a minimal reproduction by removing all the unnecessary stuff so you can find the bug easily.
when i commented out
link.click(), i found theurilogging in the console perfectly. try pasting this in browser:so it actually worked but then i got this error:
which is documented well.
so i did check point no. 3 where if you use
useImage, you should putanonymousin the 2nd position.you did put it in 2 places but forgot to put it in the background image place as you had 3 uses of
useImage()so i did just that & it worked.demo → https://codesandbox.io/s/elastic-ardinghelli-wxss8n?file=/src/App.js