记录一个方法用于移动端横屏画布的旋转图片功能。
核心代码：
rotateBase64(data) {
return new Promise((resolve) => {
const imgView = new Image();
imgView.src = data;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const cutCoor = {
sx: 0, sy: 0, ex: 0, ey: 0 }; // 裁剪坐标
imgView.onload = () => {
const imgW = imgView.width;
const imgH = imgView.height;
const size = imgH;
canvas.width = size * 2;
canvas.height = size * 2;
cutCoor.sx = size;
cutCoor.sy = size - imgW;
cutCoor.ex = size + imgH;
cutCoor.ey = size + imgW;
context.translate(size, size);
context.rotate(Math.PI / 2 * 3);
context.drawImage(imgView, 0, 0);
const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
canvas.width = imgH;
canvas.height = imgW;
context.putImageData(imgData, 0, 0);
resolve(canvas.toDataURL('image/png'));
};
});
}
整体功能：
import React, {
Component } from 'react';
import styles from './index.less';
import {
connect } from 'react-redux';
import bindDispatchToPromise from '@/constants/bindDispatchToPromise';
import SignaturePad from 'signature_pad'
import {
Button, Toast } from 'antd-mobile';
import {
SIGNATURE,
} from "@/reducers/registrationInfo";
@connect((state) => {
return {
}
})
class BaseInfo extends Component {
signaturePad = null;
constructor(props) {
super(props)
let {
match: {
params },
} = this.props;
this.state = {
hasSometing: false // 画布上是否有东西
}
}
componentDidMount() {
this.init()
}
init = () => {
const _canvas = document.querySelector("#signature");
const winW = window.innerWidth;
const winH = window.innerHeight;
_canvas.width = winW;
_canvas.height = winH;
const signaturePad = new SignaturePad(_canvas, {
minWidth: 3,
maxWidth: 3,
penColor: "#000",
});
// 添加操作事件
signaturePad.addEventListener('endStroke', this.onEndStroke);
this.signaturePad = signaturePad;
}
onEndStroke = () => {
if (!this.state.hasSometing) {
this.setState({
hasSometing: true
});
}
}
handleClear = () => {
this.signaturePad?.clear();
this.setState({
hasSometing: false
});
}
rotateBase64(data) {
return new Promise((resolve) => {
const imgView = new Image();
imgView.src = data;
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const cutCoor = {
sx: 0, sy: 0, ex: 0, ey: 0 }; // 裁剪坐标
imgView.onload = () => {
const imgW = imgView.width;
const imgH = imgView.height;
const size = imgH;
canvas.width = size * 2;
canvas.height = size * 2;
cutCoor.sx = size;
cutCoor.sy = size - imgW;
cutCoor.ex = size + imgH;
cutCoor.ey = size + imgW;
context.translate(size, size);
context.rotate(Math.PI / 2 * 3);
context.drawImage(imgView, 0, 0);
const imgData = context.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
canvas.width = imgH;
canvas.height = imgW;
context.putImageData(imgData, 0, 0);
resolve(canvas.toDataURL('image/png'));
};
});
}
handleSubmit = async () => {
const {
hasSometing
} = this.state;
console.log("hasSometing", hasSometing)
if (!hasSometing) {
Toast.show({
content: "请先签名"
})
return
}
const data = this.signaturePad.toDataURL();
const base64 = await this.rotateBase64(data)
console.log('base64 ',base64 )// 最后正向旋转的图片
}
handleGoBack = () => {
this.props.history.goBack();
}
render() {
let {
} = this.state
return (
<div className={
styles.body}>
<canvas
id="signature"
className={
styles.canvas}
></canvas>
<div className={
styles.footer}>
<Button className={
styles.btn} onClick={
this.handleGoBack}>返回</Button>
<Button color="primary" onClick={
this.handleClear} className={
styles.btn} >清空</Button>
<Button color="primary" onClick={
this.handleSubmit} className={
styles.btn} >确认</Button>
</div>
</div>
)
}
}
export default BaseInfo;
