Exporting canvas to image exports empty image #122
Comments
kevgathuku
changed the title
class App extends React.Component {
handleExportClick = () => {
console.log(this.stageRef.getStage().toDataURL());
}
render() {
return (
<div>
<Stage width={700} height={700} ref={node => { this.stageRef = node}}>
<Layer>
<MyRect/>
</Layer>
</Stage>
<button style={{ position: 'absolute', top: '0'}} onClick={this.handleExportClick}>Export stage</button>
</div>
);
}
}http://jsbin.com/bevarosibo/3/edit?js,output let me know if you still have any questions. |
|
Works like a charm. This has been bugging me for 3 days |
|
Hi @lavrton I am having the same issue ` const save = () => { }` |
|
@devgreenroom do you have any errors or warnings? |
|
Hi @lavrton facing the same issue without errors and warnings |
|
@sharmavartika demo? |
|
@lavrton how do I convert your example in TypeScript? Only import { Stage, Layer } from 'react-konva'
import type { Stage as StageType } from 'konva/types/Stage'
export class Konva extends React.Component {
stageRef: any = React.createRef()
handleExportClick = () => {
console.log(this.stageRef.current!.getStage().toDataURL({ mimeType: 'image/jpeg', quality: 1 }))
}
return (
<Stage
width={win.width}
height={win.height}
ref={(node) => {
this.stageRef = node
}}
>
...
</Stage>
)
}I tried doing
I also searched GitHub for examples with TS & I found some but they didn't work as well. Would love to know the answer? |
|
|
|
I already tried that. It says:
|
|
What about this: import * as React from "react";
import { Stage } from "react-konva";
import Konva from "konva";
export default class App extends React.Component {
stageRef = React.createRef<Konva.Stage>();
render() {
return <Stage ref={this.stageRef} />;
}
} |
|
Nope. It gives another error:
|
|
Well, take a look at my code. Your example of ref usage is not correct. |
|
Whoops, that worked. My bad. |
|
I can even use |
|
@deadcoder0904 Hey can you share your code for this query? |
|
@till-valhaalla this is probably the answer & try implementing the next comments. lemme know if that doesn't work out so i can find out what worked for me :) |
|
I implemented this but i am using functional programming is there any result generated in that? |
|
not sure what you are talking about??? |
|
anyways here's my complete code of the file that works fine: import { observer } from 'mobx-react'
import React from 'react'
import { Layer, Stage, Rect } from 'react-konva'
import type { Stage as StageType } from 'konva/lib/Stage'
import {
BrowserWindow,
Shadow,
URLBar,
TrafficSignal,
AddressBar,
SiteImage,
} from '@/components/index'
import { useFrameItStore } from '@/store/index'
import type { Image } from '@/types/index'
interface IProps {
className?: string
}
interface ForwardedRef {
downloadImage: ({ name, extension, pixelRatio, suffix }: Image) => void
}
const downloadURI = (uri: string, name: string) => {
const link = document.createElement('a')
link.download = name
link.href = uri
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
export const Konva = observer(
React.forwardRef<ForwardedRef, IProps>(({ className }: IProps, forwardedRef) => {
const {
canvas,
image: { show },
background,
} = useFrameItStore()
const stageRef = React.useRef<StageType>(null)
React.useImperativeHandle(
forwardedRef,
() => ({
downloadImage: ({ name, extension, pixelRatio, suffix }: Image) => {
const { transparent } = background // do not put it outside as it will always be `false` because of Closure
transparent && stageRef.current?.findOne('.transparentBackground').hide()
const options = {
mimeType: `image/${extension}`,
quality: 1,
pixelRatio: pixelRatio * window.devicePixelRatio,
}
const img = stageRef.current?.getStage().toDataURL(options) as string
const fileName = `${name === '' ? 'frameit' : name}${suffix}`
downloadURI(img, fileName)
transparent && stageRef.current?.findOne('.transparentBackground').show()
},
}),
[]
)
return (
<Stage ref={stageRef} className={className} width={canvas.width} height={canvas.height}>
<Layer>
{/* <Rect width={canvas.width} height={canvas.height} x={22} fill="papayawhip" /> */}
<BrowserWindow />
{show ? (
<>
<Shadow />
<URLBar />
<TrafficSignal />
<AddressBar />
<SiteImage />
</>
) : null}
</Layer>
</Stage>
)
})
) |
|
i mean i implemented this using react functional programming but i get the error of TypeError: Cannot read properties of null (reading 'toDataURL') – |
|
|
|
this means your i'm passing my |
|
read this for more info :) |
|
Alright! Thankyou so much! :) |
|
@till-valhaalla there's 1 change now that i've updated the versions: change import type { Stage as StageType } from 'konva/types/Stage'to import type { Stage as StageType } from 'konva/lib/Stage' |
|
actually i tried running it but it doesnt work for me.. could you guide me |
|
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 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 you did put it in 2 places but forgot to put it in the background image place as you had 3 uses of demo → https://codesandbox.io/s/elastic-ardinghelli-wxss8n?file=/src/App.js |
|
Omg,THANKYOU SOO MUCH! |
|
cool, i'll delete it...nice progress for someone just starting :) |
|
Thanks again! 😄 i was wondering if there is any other way to contact you? |
|
you can click on my github profile to find my twitter but if you are looking for programming help, best way is to post on stackoverflow or reddit or other specific forums online altho happy to point in the right direction :) |
|
Oh thats great! :) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How 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? ThanksThe text was updated successfully, but these errors were encountered: