将Caman JS预设过滤器应用于Konva React

Question

通过为层组件创建一个ref，我可以访问画布元素，然后我可以将其传递给caman函数，以将预设过滤器应用于画布中的图像。然而，当将舞台保存为图像时，不会应用过滤器，这与预期的一样有效。如何将Konva舞台导出为应用了Caman滤镜的图像。

组件编辑器.js

import React, {useRef} from 'react';
import {Stage, Layer, Image} from 'react-konva';
import EditorControls from './EditorControls';
const caman = window.Caman;
const Editor = ({image}) => {
const stageRef = useRef();
const mainLayer = useRef();

const filterSelect = filter => {
const canvas = mainLayer.current.canvas._canvas;
caman(canvas, image, function() {
this.revert();
if (!filter) {return;}
this[filter]().render();
});
}
return (
<div className='Editor'>
<Stage 
width={500}
height={500}
ref={stageRef}
>
<Layer ref={mainLayer}>
<Image
x={0}
y={0}
width={500}
height={500}
image={image}
/>
</Layer>
</Stage>
<EditorControls
onFilterSelect={filterSelect}
/>
<button
onClick={() => {
const link = document.createElement('a');
link.download = 'test.png';
link.href = stageRef.current.getStage().toDataURL({pixelRatio: 3});    
link.click();
link.remove();
}}
>
SAVE
</button>
</div>
);
}
export default Editor;

组件编辑器Controls.js

import React from 'react';
const filters = ['vintage', 'lomo', 'clarity', 'sinCity', 'sunrise', 'crossProcess', 'orangePeel', 'love', 'grungy', 'jarques', 'pinhole', 'oldBoot', 'glowingSun', 'hazyDays', 'herMajesty', 'nostalgia', 'hemingway', 'concentrate'];
const EditorControls = ({onFilterSelect}) => {
return (
<div className='EditorControls'>
<div className='EditorControls__filters'>
<button onClick={() => onFilterSelect('')}>
<p>noFilter</p>
</button>
{filters.map((filter, index) => (
<button key={filters[index]} onClick={() => onFilterSelect(filter)}>
<p>{filters[index]}</p>
</button>
))}
</div>
</div>
);
}
export default EditorControls;

Answer 1

根据https://konvajs.org/docs/sandbox/Native_Context_Access.html，不建议手动更改画布内容(在您的情况下通过Caman操作(。

如果你想申请卡曼，你可以：

1. 缓存节点并编写自己的自定义过滤器https://konvajs.org/docs/filters/Custom_Filter.html.要使其与Caman一起工作，您可以将Konva过滤器中使用的imageData转换为画布，然后应用Caman过滤器，然后转换回imageData
2. 或者，如果只想应用一次过滤器(导出时(，可以先使用node.toCanvas((方法将节点转换为<canvas>元素。然后在卡曼使用产生的画布