Add feature to export final canvas to png or base64

[embiem]

As e.g. #36, #35, #11 show, it's a common use case to export final canvas to png or base64 using the toDataUrl() function. We want to support an easy and documented way to do this for this component.

Here is an example of how it can be done today: https://codesandbox.io/s/ko956o59or canvasRef.current.canvasContainer.children[1].toDataURL()

My proposal is to have a proxy on the component, so that we can simply call canvasRef.current.toDataURL().

[embiem]

Additionally, in #62 there's the need to save the drawing together with the background image into a new image. When implementing the feature described here, one should take this case into account as well.

[0xlkda]

Any updates?

[s-kris]

Any updates? Thanks

[embiem]

Sorry, just saw that I'm assigned. This ticket is up for grabs. I currently have not the time to work on this.

If you plan on working on this, please write a short notice here so others know.

[embiem]

Referencing pending PR #67 here, which tries to implement this.

[sleepypikachu]

@embiem no action in some time on PR #67 so I'm going to pick this up if you don't object :-)

[clemkofi]

Nice @sleepypikachu ...... please any updates yet?

[sleepypikachu]

I did a hack for now so moved on. If @embiem can clarify what he wants the API to look like I am happy to implement...

[shamseertk]

REACTJS : I did this for background image export. Hope this helps, But this wont export as single image, it will still be a bkg img.

const d = this.saveableCanvas.canvasContainer.children[1].toDataURL();
const w = window.open('about:blank', 'image from canvas');
const img = require("relativepath to background image");
w.document.write("<img src='"+d+"' style='background-image: url( " + img + "); background-size: contain' alt='Exporting'/>");

[darshanksexathought]

Any Updates?

[franciscoandres]

Any updates?

[jng27]

For anyone looking for ways to download the drawing from canvas, this works for me.

let imageURL = this.refs.saveableCanvas.canvasContainer.childNodes[1].toDataURL() let downloadBtnRef = document.getElementById("downloadLink") downloadBtnRef.href = imageURL

[embiem]

Please, go ahead.

On Mon, 25 May 2020, 14:41 Elliot, notifications@github.com wrote:

@embiem https://github.com/embiem no action in some time on PR #67 https://github.com/embiem/react-canvas-draw/pull/67 so I'm going to pick this up if you don't object :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/embiem/react-canvas-draw/issues/43#issuecomment-633553055, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5P6WIPYFEOD32YDCZDRVLRTJRPDANCNFSM4JQP44OQ .

[sleepypikachu]

Please, go ahead.

On Mon, 25 May 2020, 14:41 Elliot, notifications@github.com wrote:

@embiem https://github.com/embiem no action in some time on PR #67 https://github.com/embiem/react-canvas-draw/pull/67 so I'm going to pick this up if you don't object :-)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/embiem/react-canvas-draw/issues/43#issuecomment-633553055, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5P6WIPYFEOD32YDCZDRVLRTJRPDANCNFSM4JQP44OQ .

I did a hack for now so moved on. If @embiem can clarify what he wants the API to look like I am happy to implement...

[fsolarv22]

To create a Base64 image you can do this:

const canvasRef= useRef(null) const image = canvasRef.current.canvasContainer.childNodes[1].toDataURL()

return <CanvasDraw ref={canvasRef} ...props />

[UmerMIB]

To create a Base64 image you can do this:

const canvasRef= useRef(null) const image = canvasRef.current.canvasContainer.childNodes[1].toDataURL()

return <CanvasDraw ref={canvasRef} ...props />

By this I cannot get the background image just getting only canvas

[JGP84]

REACTJS : I did this for background image export. Hope this helps, But this wont export as single image, it will still be a bkg img.

const d = this.saveableCanvas.canvasContainer.children[1].toDataURL();
const w = window.open('about:blank', 'image from canvas');
const img = require("relativepath to background image");
w.document.write("<img src='"+d+"' style='background-image: url( " + img + "); background-size: contain' alt='Exporting'/>");

Thank you very much!

[embiem]

FYI a new function has now been added that can be used to get the data url: getDataURL(fileType, useBgImage, backgroundColour)

[wondem12]

any solution to get the canvas and the background-image combined ? getDataURL(fileType, useBgImage, backgroundColour) doesn't work

[bee-mcc]

@wondem12 @embiem did you ever make any progress here? I would love to use the new feature to save the drawing in a canvas + the background image as one new PNG, but so far I have been playing with the newly document function getDataURL(fileType, useBgImage, backgroundColour) and it doesn't seem to work for me.

[bee-mcc]

Here's what I'm doing, to no avail. It saves the drawing, but not the background image

    const canvasRef = useRef(null);
    const [drawing, setDrawing] = useState();

    useEffect(() => {
        }, [props.URL]);

    function saveData() {
        console.log("hello")
        const base64 = canvasRef.current.getDataURL(".png", true, "grey")
        const points = canvasRef.current.getSaveData()
        setDrawing(base64)
        console.log(base64)
        console.log(points)

    }