首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用toDataURL()方法将组保存到Konvas.js中的图像,而不是整个舞台区域

如何使用toDataURL()方法将组保存到Konvas.js中的图像,而不是整个舞台区域
EN

Stack Overflow用户
提问于 2018-08-03 14:14:18
回答 1查看 258关注 0票数 0

我想使用toDataURL()方法来保存组和组中的所有形状,下面的pic1是我预期的结果,但我得到了一个意想不到的结果,就像下面的pic2,我如何才能保存组的唯一区域,而不是整个阶段。

我的代码显示如下:

代码语言:javascript
运行
复制
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>
    )
}

}

如果有人回答这个问题,我会很高兴的。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-03 21:42:46

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

或者您需要为toDataURL()参数设置xywidthheight

代码语言:javascript
运行
复制
const url = this.group.toDataURL({x: group.x(), y: group.y(), width: 500, height: 520 })

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51666322

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档