我正在创建一个图像编辑器，因此，当用户单击图像时，他会获得亮度，饱和度等选项。 所有这些选项都是滑块，因此亮度或饱和度将根据滑块值而变化。
面对问题：在设置亮度时， img 标签将转换为 canvas ，并且图像变为白色，之后没有任何反应。
我应该使用canvas标记代替img还是要解决此问题？
下面是我的代码：
Adjust.jsx(Adjust component)
import React, {Component} from 'react';
import './Adjust.css'
import Slider from '../slider/slider';
import $ from "jquery";
class Adjust extends Component {
constructor(props) {
super(props);
this.state = {
adjust : [
{
"name": "Brightness",
"range" : 0
},
{
"name": "Saturation",
"range" : 0
}
]
}
}
slidderChangeHandler = (event, element) => {
event.persist();
let adjust = [...this.state.adjust];
adjust.map((el) => {
if(el.name === element.name){
el.range = event.target.value
}
})
this.setState({ adjust: adjust }, () => {
let imgId = '#' + $(this.props.selected).children().attr('id');
window.caman(imgId, function() {
if(element.name === 'Brightness'){
this.brightness(parseFloat(element.range)).render()
}
if(element.name === 'Saturation'){
console.log(parseFloat(element.range));
}
})
});
}
render() {
let slider = this.state.adjust.map((element, i) => {
return (
<Slider SliderRange={element}
draggging={(event, element) => this.slidderChangeHandler(event, element)}
key={element.name + i}
/>
)
})
return (
<div className="adjust-main-container">
{slider}
</div >
);
}
}
export default Adjust;
此组件最终在我的App.js组件中呈现：
App.js
import React, { Component } from "react";
import "./App.css";
import $ from "jquery";
import "jquery-ui/ui/widgets/draggable";
import DragSelect from "dragselect";
import Button from "./components/Button/Button";
import Slider from "./components/slider/slider";
import Dropdown from "./components/Dropdown/dropdown";
import Adjust from './components/Adjust/Adjust';
// import Caman from 'caman'
// --> OFF'
/* eslint no-undef: 0 */
// eslint-disable-next-line
class App extends Component {
state = {
btn: [
{ value: "Add Element", id: "" },
{ value: "Wrap", id: "group" },
{ value: "Unwrap", id: "ungroup" },
{ value: "unwrapPerm", id: "ungroupIndivi" },
{ value: "Delete", id: "delete" },
{ value: "Copy", id: "copy" },
{ value: "Adjust", id: "adjust" }
// { value: "Undo", id: "undo" },
// { value: "Redo", id: "redo" }
],
dropdown: [
{ value: "Postion", id: "" },
{ value: "Forwards", id: "fwd" },
{ value: "To Front", id: "front" },
{ value: "Backwards", id: "bkwd" },
{ value: "To Back", id: "Back" },
{ value: "Top", id: "top" },
{ value: "Middle", id: "middle" },
{ value: "Bottom", id: "bottom" },
{ value: "Left", id: "left" },
{ value: "Centre", id: "centre" },
{ value: "Right", id: "right" }
],
slidder: {
range: 0,
selected: []
},
flip: [
{ value: "Flip", id: "" },
{ value: "Horizontal", id: "hori" },
{ value: "Vertical", id: "veri" }
],
adjust: false
};
constructor(props) {
super(props);
var ds;
this.ds = ds;
var permID, deleteElm, history;
this.copyArr = [];
this.positionElement = "";
this.history = history;
this.deleteElm = deleteElm;
Array.prototype.hasMin = function(attrib) {
return this.reduce(function(prev, curr) {
return prev[attrib] < curr[attrib] ? prev : curr;
});
};
Array.prototype.hasMax = function(attrib) {
return this.reduce(function(prev, curr) {
return prev[attrib] > curr[attrib] ? prev : curr;
});
};
window.caman = Caman;
}
componentDidMount() {
var idArray = [];
var permIdarray = [];
this.ds = new DragSelect({
selectables: document.getElementsByClassName("ele-select"),
area: document.getElementById("canvas"),
onElementSelect: element => {
if($(element).attr('class').indexOf('flippable') > -1 && $(element).children()[0].nodeName === 'IMG'){
$('#adjust').css({
opacity : 1
})
}
this.positionElement = element;
let slidder = { ...this.state.slidder };
slidder.selected.push(element);
slidder.range = Math.trunc($(element).css("opacity") * 100);
this.setState({
slidder: slidder
});
idArray.push(this.ds.getSelection());
this.copyArr.push(this.ds.getSelection());
}
});
$(".text").draggable({
cursor: "move"
});
$("#canvas").on("mousedown", ".main-container", e => {
$("#ungroupIndivi").css({
opacity: 0
});
$("#delete").css({
opacity: 0
});
$('#adjust').css({
opacity : 0
})
let slidder = { ...this.state.slidder };
slidder.selected = [];
this.setState({
slidder: slidder,
adjust: false
});
if (
$(e.target)
.attr("class")
.indexOf("main-container") > -1 &&
$(e.target)
.attr("class")
.indexOf("flippable-ele") <= -1 &&
$(e.target)
.attr("class")
.indexOf("flippable") <= -1
) {
if ($(".wrapped").length > 0) {
this.unwrapAll();
}
this.ds.start();
} else {
this.deleteElm = e.target;
$("#delete").css({
opacity: 1
});
if (
$(e.target)
.parent()
.attr("class")
.indexOf("perm") > -1 || $(e.target)
.attr("class")
.indexOf("perm") > -1 || ( $(e.target)
.attr("class")
.indexOf("flippable-ele") > -1 && $(e.target)
.parent()
.attr("class")
.indexOf("perm") > -1)
) {
$("#ungroupIndivi").css({
opacity: 1
});
}
idArray = [];
this.ds.stop();
this.ds.break();
}
});
$("#canvas").on("mouseup", e => {
if (idArray.length > 1) {
this.check(idArray);
}
this.ds.stop();
this.ds.start();
});
var map = {}; // You could also use an array
onkeydown = onkeyup = event => {
/* event = event || event; // to deal with IE */
map[event.keyCode] = event.type == "keydown";
this.keyEventCheck(event, map);
};
}
return (
<React.Fragment>
{button}
<Dropdown
dropdown={this.state.dropdown}
dropdownClick={this.dropdownClickHandler}
/>
<Dropdown
dropdown={this.state.flip}
dropdownClick={this.dropdownClickHandler}
/>
{this.state.slidder.selected.length > 0 ? (
<Slider
SliderRange={this.state.slidder}
draggged={event => this.slidderChangeHandler(event)}
/>
) : null}
{
this.state.adjust ? <Adjust selected={this.deleteElm}/> : null
}
<div id="canvas">
<div className="main-container">
<div className="text ele-select" id="text1" draggable="true">
Some text
</div>
<div className="text ele-select" id="text2" draggable="true">
Another text
</div>
<div className="text ele-select flippable" id="text3">
<img
id="img-01"
className="flippable-ele"
src={require("./assets/imgage1.jpeg")}
alt="Italian Trulli"
width="70px"
height="70px"
/>
</div>
</div>
</div>
</React.Fragment>
);
}
}
export default App;