Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | 3x 3x 3x 1x 1x 1x 1x 1x | // @flow
import { useEffect, useRef } from "react"
import ImageCanvas from "./ImageCanvas"
import prepareComponent from "@bluframe/grapple/prepareComponent"
type Props = {|
+imageDataUrl: string
|}
export type ComponentProps = {|
+canvasRef: React$Ref<"canvas">
|}
const X_COORDINATE = 0
const Y_COORDINATE = 0
export const usePrepareComponent = ({
imageDataUrl
}: Props): ComponentProps => {
const canvasRef = useRef(null)
useEffect(() => {
Eif (!canvasRef.current) {
return
}
const canvas = canvasRef.current
const context = canvas.getContext("2d")
const imageObj = new Image()
imageObj.onload = () => {
canvas.width = imageObj.width
canvas.height = imageObj.height
context.drawImage(
imageObj,
X_COORDINATE,
Y_COORDINATE,
imageObj.width,
imageObj.height
)
}
imageObj.src = imageDataUrl
}, [imageDataUrl])
return {
canvasRef
}
}
export default (prepareComponent<Props, ComponentProps>(usePrepareComponent)(
ImageCanvas
): React$ComponentType<Props>)
|