在react项目中使用canvas绘图,在原有图片上绘制批阅痕迹,
支持撤回功能,保留前面的绘图痕迹,在绘制完毕后合成一张新的图片,
pic可以随便找一张图片
import React, { Component } from 'react';
import "./index.less";
let pic = '...';
class Canvas extends Component {
constructor(props) {
super(props);
this.state = {
imgObj: {},
isAllowDrawLine: false, //是否允许划线
finalImg: ''
}
}
componentDidMount() {
let that = this;
let canvasPic = new Image();
canvasPic.setAttribute("crossOrigin", 'Anonymous')
canvasPic.onload = function () {
let width = parseInt(canvasPic.width);
let height = parseInt(canvasPic.height);
let imgObj = {
width,
height,
url: pic,
step: -1,
historyCanvas: []
}
that.setState({
imgObj
})
}
canvasPic.src = pic
}
render() {
let { imgObj,finalImg } = this.state;
return (
<div className='canvas_page'
onMouseUp={(e) => { this.canvasMouseUp(e) }}>
<button onClick={this.canvasBack}>撤回</button>
<button onClick={this.hecheng}>合成</button>
{imgObj && imgObj.url
? <div className='canvas_box'>
<img src={imgObj.url} className='bg_img'
style={
{ width: '990px', height: parseInt(990 * imgObj.height / imgObj.width) + 'px' }} alt="" />
<canvas id='myCanvas' width='