如何使用 React Konva Image 将画布重新绘制到自身上？答案

【问题标题】：How to draw canvas back onto itself with React Konva Image?如何使用 React Konva Image 将画布重新绘制到自身上？
【发布时间】：2020-01-29 07:19:21
【问题描述】：

我正在尝试在react-konva 中实现this Stack Overflow questions' top answer，但卡在这行代码上：

  ctx.drawImage(canvas,
    blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height,
    blurredRect.x, blurredRect.y, blurredRect.width, blurredRect.height
  );

我们如何创建带有 9 个参数的 Image 组件？
我们将哪个canvas 元素添加到第二个Image 组件以及如何添加？

// draft code
import useImage from 'use-image';

const [image] = useImage(url, "anonymous");

<Stage width={width} height={height}>
  <Layer>
    <Image image={image} width={width} height={height}></Image>
    // second Image here with the blur?
    <Rect fill="rgba(255,255,255,0.2)" x={80} y={80} width={200} height={200} />
  </Layer>
</Stage>

【问题讨论】：

标签： javascript canvas html5-canvas konvajs react-konva

【解决方案1】：

您不需要使用初始问题中的<Rect> 组件，因为您只需创建画布元素并将其用于<Image> 组件。

有很多方法可以做到这一点。这是如何使用钩子制作这样的画布的示例：

import React, { Component } from "react";
import { render } from "react-dom";
import { Stage, Layer, Image } from "react-konva";
import useImage from "use-image";

const useCanvas = () => {
  const [image] = useImage(
    "https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg"
  );
  const [canvas, setCanvas] = React.useState(null);

  React.useEffect(() => {
    // do this only when image is loaded
    if (!image) {
      return;
    }
    var blurredRect = {
      x: 80,
      y: 80,
      height: 200,
      width: 200,
      spread: 10
    };
    const canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    canvas.width = image.width / 2;
    canvas.height = image.height / 2;
    // first pass draw everything
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    // next drawings will be blurred
    ctx.filter = "blur(" + blurredRect.spread + "px)";
    // draw the canvas over itself, cropping to our required rect
    ctx.drawImage(
      canvas,
      blurredRect.x,
      blurredRect.y,
      blurredRect.width,
      blurredRect.height,
      blurredRect.x,
      blurredRect.y,
      blurredRect.width,
      blurredRect.height
    );
    // draw the coloring (white-ish) layer, without blur
    ctx.filter = "none"; // remove filter
    ctx.fillStyle = "rgba(255,255,255,0.2)";
    ctx.fillRect(
      blurredRect.x,
      blurredRect.y,
      blurredRect.width,
      blurredRect.height
    );

    setCanvas(canvas);
  }, [image]);

  return canvas;
};

const App = () => {
  const canvas = useCanvas();
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Image image={canvas} />
      </Layer>
    </Stage>
  );
};

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/react-konva-canvas-for-image-ypfmj

【讨论】：