使用 React Konva 时隐藏下载的透明图像

Question

我想只下载木瓜鞭方盒子，后面没有透明图片。

我正在使用 React Konva。 我有以下代码：

import * as React from "react"
import { Stage, Layer, Rect } from "react-konva"
import type { Stage as StageType } from "konva/types/Stage"
import { observer } from "mobx-react"

import "./styles.css"
import { useStore } from "./context"

const downloadURI = (uri: string | undefined, name: string | undefined) => {
    const link = document.createElement("a")
    link.download = name as string
    link.href = uri as string
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

function App() {
    const [fillColor, setFillColor] = React.useState("")
    const [downloadClicked, setDownloadClicked] = React.useState(false)
    const stageRef = React.useRef<StageType>(null)
    const transparentBackground = new window.Image()
    transparentBackground.src =
        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAABlBMVEUAAADY2NjnFMi2AAAAAXRSTlMAQObYZgAAABVJREFUGNNjYIQDBgQY0oLDxBsIQQCltADJNa/7sQAAAABJRU5ErkJggg=="

    const store = useStore()
    const { win, canvas, browser, pad } = store

    return (
        <div className="flex">
            <div id="sidebar">
                <h1 className="text">
                    Center <span>papayawhip</span> Canvas
                </h1>
                <input
                    type="text"
                    placeholder="Enter Fill Color"
                    value={fillColor}
                    onChange={(e) => setFillColor(e.target.value)}
                />
                <button
                    className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    onClick={() => {
                        setDownloadClicked(true)
                        const options = { mimeType: `image/png`, quality: 1, pixelRatio: 1 }
                        const img = stageRef.current?.getStage().toDataURL(options)
                        downloadURI(img, "download.png")
                        setDownloadClicked(false)
                    }}
                >
                    Download Image
                </button>
            </div>
            <Stage
                ref={stageRef}
                width={canvas.width}
                height={canvas.height}
                id="konva"
            >
                <Layer>
                    {fillColor === "" && downloadClicked && (
                        <Rect
                            width={browser.width + 200}
                            height={browser.height + 200}
                            x={pad / 2}
                            y={(win.height - browser.height) / 2}
                            fillPatternImage={transparentBackground}
                            fill={fillColor}
                        />
                    )}
                    <Rect
                        width={browser.width}
                        height={browser.height}
                        x={pad / 2}
                        y={(win.height - browser.height) / 2}
                        fill="papayawhip"
                    />
                </Layer>
            </Stage>
        </div>
    )
}

export default observer(App)

Codesandbox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl?file=/src/App.tsx

如何只下载 papayawhip 矩形部分？

Answer 1

原则上，

1. 隐藏您不想包含在图像中的任何形状，
2. 获取图像
3. 取消隐藏你隐藏的内容 1.

注意：不要在 1 和 3 之间绘制图层/阶段，否则您会看到不需要的闪烁。

Answer 2

您可以将x 、 y 、 width和height属性传递给stage.toDataURL(options) function 以仅捕获屏幕的一部分：

const options = {
  mimeType: `image/png`,
  quality: 1,
  pixelRatio: 1,
  width: browser.width,
  height: browser.height,
  x: pad / 2,
  y: (win.height - browser.height) / 2
};
const img = stageRef.current?.getStage().toDataURL(options);

https://codesandbox.io/s/react-konva-export-part-of-the-stage-hf5sn

Answer 3

我在安东的帮助下解决了这个问题。 征服袋熊的方法也是一样的。

const backgroundSelector = React.useRef(null)

/* gave a `name` to `transparentBackground` rectangle */
<Rect
  name="transparentBackground"
/>

/* then searched for it & hid it */
stageRef.current?.findOne(".transparentBackground").hide()

/* download the image */
downloadURI(img, "download.png")

/* show it again */
stageRef.current?.findOne(".transparentBackground").show()

更新了 Codesandbox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl?file=/src/App.tsx