如何使用toDataURL（）方法将组保存到Konvas.js中的Image中，而不是整个舞台区域中

Question

我想使用toDataURL（）方法保存Group和Group中的所有形状，下面的pic1是我的预期结果，但是我得到了一个意外的结果，如下面的pic2，我该怎么做才能保存唯一的区域而不是整个阶段，

我的代码如下：

class Test1 extends React.Component{

constructor(props) {
    super(props)
    this.state = {
        image: new window.Image(),
    }
}

static defaultProps = {

}

componentDidMount() {

    this.state.image.setAttribute("crossOrigin", "anonymous");
    this.state.image.src = "https://vd.youniwote.com/homework/44evmey2cbd/submit/44evmey2cbe.jpg";
    this.state.image.onload = () => {
        // calling set state here will do nothing
        // because properties of Konva.Image are not changed
        // so we need to update layer manually
        this.imageNode.getLayer().batchDraw();
    };
}

render() {

    return (
        <div>
            <Button style={{top: 0, left: 0}} onClick={() => {
                console.log(this.group.toDataURL())
            }}>saveToImage</Button>
            <div style={{backgroundColor: '#e3e3e3'}}>
                <Stage
                    height={1000}
                    width={1000}
                    ref={node => {
                        this.stage = node;
                    }}
                >
                    <Layer
                        ref={node => {
                            this.layer = node;
                        }}
                    >
                        <Group
                            ref={node => {
                                this.group = node;
                            }}
                        >
                            <Text
                                x={300}
                                y={0}
                                text="test text"
                                fontSize={24}
                                fill='red'
                            />

                            <Image
                                draggable
                                x={200}
                                y={20}
                                image={this.state.image}
                                width={500}
                                height={500}
                                ref={node => {
                                    this.imageNode = node;
                                }}
                            >

                            </Image>
                        </Group>

                    </Layer>

                </Stage>
            </div>

        </div>
    )
}

}

如果有人回答这个问题，我会提出申请

Answer 1

最近有相关的修复程序。尝试将Konva更新到最新版本。

或者您需要为$('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } else { $(':checkbox').each(function() { this.checked = false; }); } 参数设置x，y，width和height：

toDataURL()

演示：https://codesandbox.io/s/pkr5o2wpl7