如何设置自定义大小以在 react-konva 中导出图像?
How to set a custom Size to exporting image in react-konva?
我已经使用 react-konva 创建了一个响应阶段,但我找不到设置自定义尺寸以导出图像的方法。通常,右键单击并保存图像是作为当时 window 中的大小工作的。我想添加一个按钮来下载图像,但我无法设置这样做的方法,因为我是 React Hooks 的新手,我找不到设置数据的方法 URL。请参考这个
import React, { Component, useState, useRef, useCallback } from "react";
import { render } from "react-dom";
import { Stage, Layer, Text, Image, Rect, Transformer, Circle, Line } from "react-konva";
import card01 from "../images/01.jpg"
import useImage from "use-image";
import "./styless.css";
import Button from '@mui/material/Button';
const WIDTH = 875;
const HEIGHT = 500;
const ZOOM = 1;
class Canvas extends Component {
state = {
stageWidth: WIDTH,
zoom: 1,
};
render() {
const { containerWidth } = this.props;
var scale = (containerWidth / WIDTH) * ZOOM;
let width = WIDTH * scale;
let height = HEIGHT * scale;
console.log({ containerWidth, width, height, scale });
const LionImage = () => {
const [image] = useImage(card01);
return <Image image={image} width={width} height={height} scale={scale}/>;
};
return (
<div style={{ width: `100%`, border: "1px solid grey" }}>
<Stage width={width} height={height} scale={scale}>
<Layer>
<LionImage />
<Text
x={containerWidth / 10}
y={scale*35}
text="Some text"
fontSize={28}
fontFamily="Poppins"
fill="gray"
scaleX={scale}
scaleY={scale}
width={width}
height={height}
/>
</Layer>
</Stage>
</div>
);
}
}
class App extends Component {
state = {
zoom: 1
};
componentDidMount() {
this.checkSize();
window.addEventListener("resize", this.checkSize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.checkSize);
}
checkSize = () => {
const containerWidth = this.container.offsetWidth;
const containerHeight = this.container.offsetHeight;
this.setState({ ...this.state, containerWidth, containerHeight });
};
render() {
const pWidht = this.state.containerWidth
? `${this.state.containerWidth * this.state.zoom}px`
: "100%";
return (
<>
<div
style={{ width: "80%", height: "100%", left: "10%", position: "absolute" }}
ref={(node) => {
this.container = node;
} }
>
<div style={{ overflow: "auto;", width: `${pWidht}` }}>
<div>
<Button color="inherit" size="small" variant="outlined" sx={{boxShadow:3}} style={{marginTop:"20px",marginRight:"10px",marginBottom:"10px", fontSize:"12pt", color:"white"}}
type="button"
value="+"
onClick={() => this.setState({ ...this.state, zoom: this.state.zoom + 0.2 })}> + </Button>
<Button color="inherit" size="small" variant="outlined" sx={{boxShadow:3}} style={{marginTop:"20px",marginRight:"10px",marginBottom:"10px", fontSize:"12pt", color:"white"}}
type="button"
value="-"
onClick={() => this.setState({ ...this.state, zoom: this.state.zoom - 0.2 })} > - </Button>
</div>
<Canvas containerWidth={pWidht.replace("px", "")} />
</div>
</div>
</>
);
}
}
const X = () => {
return <App />;
};
render(<X />, document.getElementById("root"));
export default App;
您需要使用 ref
到 Stage
并获取图像 URL 并下载它。
- 在您的 Canvas 组件中使用
createRef
创建一个 ref
。
constructor(props) {
super(props);
this.stageRef = createRef(null);
}
- 将
stageRef
添加到您的 Stage
。
<Stage ... ref={this.stageRef}>
...
...
</Stage>
- 添加以下两个实用函数,
downloadURI
将图像下载为文件,handleExport
从 ref
. 获取数据 URI
downloadURI = (uri, name) => {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
handleExport = () => {
const uri = this.stageRef.current.toDataURL();
this.downloadURI(uri, "stage.png");
};
- 添加一个点击处理程序设置为
handleExport
功能的新按钮。
<button onClick={this.handleExport}>Download</button>
工作示例:
手动设置图片大小
使用以下实用函数,它会使用从舞台 ref
.
接收到的数据 URI 更改图像 width
和 height
resizeImage = (url, width, height, callback) => {
var sourceImage = new Image();
sourceImage.onload = function () {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);
callback(canvas.toDataURL());
};
sourceImage.src = url;
};
// fixed the image size to 200px by 200px before download
handleExport = () => {
const uri = this.stageRef.current.toDataURL();
this.resizeImage(uri, 200, 200, (sizeUpdatedDataURL) => {
this.downloadURI(sizeUpdatedDataURL, "stage.png");
});
};
我已经使用 react-konva 创建了一个响应阶段,但我找不到设置自定义尺寸以导出图像的方法。通常,右键单击并保存图像是作为当时 window 中的大小工作的。我想添加一个按钮来下载图像,但我无法设置这样做的方法,因为我是 React Hooks 的新手,我找不到设置数据的方法 URL。请参考这个
import React, { Component, useState, useRef, useCallback } from "react";
import { render } from "react-dom";
import { Stage, Layer, Text, Image, Rect, Transformer, Circle, Line } from "react-konva";
import card01 from "../images/01.jpg"
import useImage from "use-image";
import "./styless.css";
import Button from '@mui/material/Button';
const WIDTH = 875;
const HEIGHT = 500;
const ZOOM = 1;
class Canvas extends Component {
state = {
stageWidth: WIDTH,
zoom: 1,
};
render() {
const { containerWidth } = this.props;
var scale = (containerWidth / WIDTH) * ZOOM;
let width = WIDTH * scale;
let height = HEIGHT * scale;
console.log({ containerWidth, width, height, scale });
const LionImage = () => {
const [image] = useImage(card01);
return <Image image={image} width={width} height={height} scale={scale}/>;
};
return (
<div style={{ width: `100%`, border: "1px solid grey" }}>
<Stage width={width} height={height} scale={scale}>
<Layer>
<LionImage />
<Text
x={containerWidth / 10}
y={scale*35}
text="Some text"
fontSize={28}
fontFamily="Poppins"
fill="gray"
scaleX={scale}
scaleY={scale}
width={width}
height={height}
/>
</Layer>
</Stage>
</div>
);
}
}
class App extends Component {
state = {
zoom: 1
};
componentDidMount() {
this.checkSize();
window.addEventListener("resize", this.checkSize);
}
componentWillUnmount() {
window.removeEventListener("resize", this.checkSize);
}
checkSize = () => {
const containerWidth = this.container.offsetWidth;
const containerHeight = this.container.offsetHeight;
this.setState({ ...this.state, containerWidth, containerHeight });
};
render() {
const pWidht = this.state.containerWidth
? `${this.state.containerWidth * this.state.zoom}px`
: "100%";
return (
<>
<div
style={{ width: "80%", height: "100%", left: "10%", position: "absolute" }}
ref={(node) => {
this.container = node;
} }
>
<div style={{ overflow: "auto;", width: `${pWidht}` }}>
<div>
<Button color="inherit" size="small" variant="outlined" sx={{boxShadow:3}} style={{marginTop:"20px",marginRight:"10px",marginBottom:"10px", fontSize:"12pt", color:"white"}}
type="button"
value="+"
onClick={() => this.setState({ ...this.state, zoom: this.state.zoom + 0.2 })}> + </Button>
<Button color="inherit" size="small" variant="outlined" sx={{boxShadow:3}} style={{marginTop:"20px",marginRight:"10px",marginBottom:"10px", fontSize:"12pt", color:"white"}}
type="button"
value="-"
onClick={() => this.setState({ ...this.state, zoom: this.state.zoom - 0.2 })} > - </Button>
</div>
<Canvas containerWidth={pWidht.replace("px", "")} />
</div>
</div>
</>
);
}
}
const X = () => {
return <App />;
};
render(<X />, document.getElementById("root"));
export default App;
您需要使用 ref
到 Stage
并获取图像 URL 并下载它。
- 在您的 Canvas 组件中使用
createRef
创建一个ref
。
constructor(props) {
super(props);
this.stageRef = createRef(null);
}
- 将
stageRef
添加到您的Stage
。
<Stage ... ref={this.stageRef}>
...
...
</Stage>
- 添加以下两个实用函数,
downloadURI
将图像下载为文件,handleExport
从ref
. 获取数据 URI
downloadURI = (uri, name) => {
var link = document.createElement("a");
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
handleExport = () => {
const uri = this.stageRef.current.toDataURL();
this.downloadURI(uri, "stage.png");
};
- 添加一个点击处理程序设置为
handleExport
功能的新按钮。
<button onClick={this.handleExport}>Download</button>
工作示例:
手动设置图片大小
使用以下实用函数,它会使用从舞台 ref
.
width
和 height
resizeImage = (url, width, height, callback) => {
var sourceImage = new Image();
sourceImage.onload = function () {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);
callback(canvas.toDataURL());
};
sourceImage.src = url;
};
// fixed the image size to 200px by 200px before download
handleExport = () => {
const uri = this.stageRef.current.toDataURL();
this.resizeImage(uri, 200, 200, (sizeUpdatedDataURL) => {
this.downloadURI(sizeUpdatedDataURL, "stage.png");
});
};