[英]React: Canvas drawImage is not updating the canvas
I am using react konva to draw images on a canvas. I have two different Layers (canvas in konva) inside a Stage Element.我正在使用 react konva 在 canvas 上绘制图像。我在舞台元素中有两个不同的图层(konva 中的画布)。 One picture is predetermined and one gets updated by an input at runtime.一张图片是预先确定的,一张在运行时通过输入更新。 Both Pictures get shown fine, but when I try to save them, the one coming from the input is just a black png and not the picture I selected.两张图片都显示正常,但是当我尝试保存它们时,来自输入的图片只是一个黑色 png 而不是我选择的图片。
Javascript: Javascript:
imageUpload when input is clicked.单击输入时上传图像。
const handleImageUpload = e => {
setSelected(false);
let canvas = backgroundCanvas.current;
let ctx = canvas.getContext('2d');
newImage.onload = function() {
newImage.crossOrigin = 'Anonymus';
ctx.drawImage(newImage, 0, 0);
};
const [file] = e.target.files;
if (file) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = e => {
ctx.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);
newImage.src = e.target.result;
};
}
};
It shows the image on the screen like i want to and looks like it works, however, if I want to save the canvas as a png file, it is not there anymore.它像我想要的那样在屏幕上显示图像并且看起来可以正常工作,但是,如果我想将 canvas 另存为 png 文件,它就不再存在了。
Save function:保存 function:
const saveImage = () => {
let backgroundCanvasSave = backgroundCanvas.current;
const backgroundCanvasData = backgroundCanvasSave.toDataURL({
mimeType: 'image/png',
});
downloadURI(backgroundCanvasData, 'stage.png');
};
JSX: JSX:
<div>
<Stage
ref={canvasStage}
width={window.innerWidth}
height={window.innerHeight}
>
<Layer
ref={backgroundCanvas}
onClick={() => {
setSelected(false);
}}
onTap={() => {
setSelected(false);
}}
/>
<Layer ref={lampCanvas}>
<Lamp
shapeProps={shape}
isSelected={selected}
onSelect={() => {
setSelected(true);
}}
onChange={setShape}
/>
</Layer>
</Stage>
<label
for="files"
class="btn"
style={{
border: '1px solid',
display: 'inline block',
padding: '6px 12px',
cursor: 'pointer',
}}
>
Bild hochladen
<input
id="files"
visibility="hidden"
type="file"
accept="image/*"
style={{ display: 'none' }}
onChange={handleImageUpload}
ref={imageUploader}
/>
</label>
<label
class="btn"
style={{
border: '1px solid',
display: 'inline block',
padding: '6px 12px',
cursor: 'pointer',
}}
onClick={saveImage}
>
Bild speichern
</label>
</div>
);
The goal of the application would be to save the Stage with both pictures inside it, but as I said, the background is always black, while the lamp is showing.该应用程序的目标是保存其中包含两张图片的舞台,但正如我所说,背景始终为黑色,而灯亮着。
Thanks in advance!提前致谢!
Do not use the context
of a layer directly.不要直接使用层的context
。 Konva may lose your changes while exporting the canvas.导出 canvas 时,Konva 可能会丢失您的更改。
To fix the issue just draw your input as <Image />
component:要解决此问题,只需将您的输入绘制为<Image />
组件:
const newImage = new Image();
newImage.onload = () => {
this.setState({ image: newImage })
};
newImage.crossOrigin = 'Anonymus';
newImage.src = e.target.result;
// in render:
<Layer
ref={backgroundCanvas}
onClick={() => {
setSelected(false);
}}
onTap={() => {
setSelected(false);
}}
>
<Image image={this.state.image} />
</Layer>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.