嘿,我正在尝试将html5 canvas视频工作到React应用程序中,同时使代码尽可能清晰。应该做出什么样的改进以最大程度地利用React提高性能?任何帮助将不胜感激。 假设是标准的React应用程序。
import React, { Component } from 'react';
import './App.css';
import video from './video.mp4';
import watermark from './watermark.png';
class App extends Component {
constructor() {
super();
this.state = {};
}
componentDidMount() {
const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
const context = canvas.getContext('2d');
context.drawImage(document.querySelector('video'), 0, 0, 720, 1280);
context.drawImage(
document.querySelector('.watermark'),
parseInt(document.querySelector('select').value),
parseInt(document.querySelector('select').value)
);
if (document.querySelector('input[name=live]').checked) {
this.setState({ image: canvas.toDataURL() });
}
}
render() {
const range = [];
for (let i = 0; i < 1280; i++) {
range.push(i);
}
return (
<div className="app">
<video src={video} controls />
<div>
<div className="watermarkButton" style={{}}>
<span className="watermarkButtonX">Watermark X
<select className="positionX">
{range.map(i => (
<option key={i}>{i}</option>
))} </select></span>
<span className="watermarkButtonY">Watermark Y
<select className="positionY">
{range.map(i => (
<option key={i}>{i}</option>
))} </select></span>
<span>Live</span>
<input type="checkbox" name="live" />
</div>
<button className = "watermarkButton watermarkSubmit"
onClick={() => {
const canvas = document.createElement('canvas');
canvas.width = 1280;
canvas.height = 720;
const context = canvas.getContext('2d');
context.drawImage(document.querySelector('video'), 0, 0, 1280, 720);
context.drawImage(
document.querySelector('.watermark'),
parseInt(document.querySelector('.positionX').value),
parseInt(document.querySelector('.positionY').value)
);
this.setState({ image: canvas.toDataURL() });
}}> Watermark! </button>
<img alt="watermarks" className="watermark" src={watermark} style={{ visibility: 'visible' }} />
<img alt="watermarks" className="imageDisplay" height="405px" width="560px" src={this.state.image} />
</div>
</div>
);
}
}
导出默认应用;
答案 0 :(得分:0)
您可以通过预先构建范围并使其恒定来节省一些时间。
另外,设置width
和height
常量将防止将来出现错误。
大多数画布代码是重复的,您可以将其放入函数中。
这里是一个例子:
import React, {Component} from "react";
import "./App.css";
import video from "./video.mp4";
import watermark from "./watermark.png";
const width = 1280;
const height = 720;
const range = Array(5).fill().map((x, i) => <option key={i}>{i}</option>);
class App extends Component {
constructor() {
super();
this.state = {};
}
componentDidMount() {
this.canvasMagic(".watermark", "select", "select");
}
canvasMagic(el, x, y) {
const canvas = document.createElement("canvas");
canvas.setAttribute("width", width);
canvas.setAttribute("height", height);
const context = canvas.getContext("2d");
context.drawImage(document.querySelector("video"), 0, 0, width, height);
context.drawImage(
document.querySelector(el),
parseInt(document.querySelector(x).value),
parseInt(document.querySelector(y).value)
);
if(document.querySelector("input[name=live]").checked) {
this.setState({image: canvas.toDataURL()});
}
}
render() {
return (
<div className="app">
<video src={video} controls/>
<div>
<div className="watermarkButton">
<span className="watermarkButtonX">Watermark X
<select className="positionX">{range}</select>
</span>
<span className="watermarkButtonY">Watermark Y
<select className="positionY">{range}</select>
</span>
<span>Live</span>
<input type="checkbox" name="live"/>
</div>
<button className="watermarkButton watermarkSubmit"
onClick={() => this.canvasMagic(".watermark", ".positionX", ".positionY")}> Watermark!
</button>
<img alt="watermarks" className="watermark" src={watermark} style={{visibility: "visible"}}/>
<img alt="watermarks" className="imageDisplay" height="405px" width="560px" src={this.state.image}/>
</div>
</div>
);
}
}
希望这会有所帮助