Skip to content

zcWSR/konva-ssr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Konva-SSR

generate image on server use react-konva

import React from 'react';
import { Layer, Rect } from "react-konva";
import { useImage, konvaSSR, getCanvas} from 'konva-ssr'

const App = ({width, height}) => {
  const image = useImage(resolve(process.cwd(), 'res/imgs', 'panda.jpg'))
  return (
    <Layer>
      <Rect x={0} y={0} width={width} height={height} fill="white" />
      <Rect x={20} y={20} width={100} height={100} fill="red" />
      <Image image={image} width={image.width * 3} height={image.height * 3} x={200} y={200} />
    </Layer>
  )
}

const stage = await konvaSSR(App, 1000, 500);
const canvas = getCanvas(stage);
fs.writeFileSync(process.cwd() + '/out.png', canvas.toBuffer('image/png'))

demo.png

About

generate image on server use react-konva

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published