React：使用手写签名插件：react-canvas-draw 和 react-signature-canvas
<pre><span style="font-size: 14pt">1、安装</span><br><span style="font-size: 14pt"><code>npm install react-canvas-draw --save</code><code><br><br></code>2、导入</span></pre><pre class="line-numberslanguage-tsx"><span style="font-size: 14pt"><code class="language-tsx"><span class="token keyword">import CanvasDraw <span class="token keyword">from <span class="token string">"react-canvas-draw"<span class="token punctuation">;<br><br>3、使用组件<br></span></span></span></span></code></span></pre>
<pre><span style="font-size: 14pt; color: rgba(255, 0, 0, 1)">signCanvas= React.createRef();</span></pre>
<pre><br><span style="font-size: 14pt">设置签名组件的属性</span></pre>
<pre><span style="font-size: 14pt"><CanvasDraw</span><br><span style="color: rgba(255, 0, 0, 1); font-size: 14pt"> ref={this.signCanvas}</span><br><span style="font-size: 14pt"> brushColor="#000"</span><br><span style="font-size: 14pt"> brushRadius={3}</span><br><span style="font-size: 14pt"> lazyRadius={10}</span><br><span style="font-size: 14pt"> canvasWidth={"100%"}</span><br><span style="font-size: 14pt"> canvasHeight={250}</span><br><span style="font-size: 14pt">/></span></pre>
<pre class="line-numberslanguage-tsx"><span style="font-size: 14pt"><code class="language-tsx"><span class="token keyword"><span class="token keyword"><span class="token string"><span class="token punctuation">4、得到签名并转化为图片<br></span></span></span></span></code></span></pre>
<pre><span style="font-size: 14pt">let signImg = this.signCanvas.current.canvas.drawing.toDataURL('image/png');</span></pre>
<pre class="line-numberslanguage-tsx"><span style="font-size: 14pt"><code class="language-tsx"><span class="token keyword"><span class="token keyword"><span class="token string"><span class="token punctuation">5、清空画布<br></span></span></span></span></code></span></pre>
<pre><span style="font-size: 14pt">this.signCanvas.current.clear();<br>6、将签名信息图片展示<br></span></pre>
<pre>{<br> title: '签名',<br> dataIndex : 'signImg',<br> fixed: 'left',<br> align: 'center',<br> width:150,<br> maxWidth:150,<br> _resizeable: true,<br> ellipsis: true,<br> render : (value,record,index) =>{<br> return <><br> <img src={value} style={{height:60}}/><br> </>;<br> }<br>}<br><br>使用此插件，转为png图片后无背景色透明，需要处理。</pre>
<pre><span style="font-size: 14pt">参考来源 </span>https://www.jianshu.com/p/d36bf61d8034<br><br><br></pre>
<h1>react-signature-canvas</h1>
<p>这个插件签名生成的图片虽然也是透明的，但处理起来比react-canvas-draw这个插件容易多，</p>
<p>示例：</p>
<p> </p>
<pre class="brush:javascript;gutter:true;"> //先安装
npm i -S react-signature-canvas
//导入
import SignatureCanvas from 'react-signature-canvas';
resetSignBtn=() =>{
this.signCanvas.current.clear();
}
//给画布添加背景色，只需要在画布打开是拿到画布，给画布添加颜色即可
async signBtn(type) {
await this.setState({signModal: true});
//得到画布
let canvas = this.signCanvas.current._canvas;
if (canvas.getContext) {
let ctx = canvas.getContext('2d');
ctx.fillStyle = "#fff";//添加颜色
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
}
<Modal
title={'签名'}
visible={signModal}
onCancel={this.hideSignModal}
footer={[
<Button key={'sign_rep' + Math.random()} onClick={this.resetSignBtn}>重签</Button>,
<Button key={'sign_sub' + Math.random()} type='primary' onClick={this.confirmSignBtn}>确定</Button>,
]}
destroyOnClose={true}
centered={true}
width={1000}
></pre>
<pre> {/*这个组将的class样式的宽高，要与属性width，height一样，不然可能出现画线轨迹与光标偏移量太大*/}</pre>
<pre class="brush:javascript;gutter:true;"> <SignatureCanvas ref={this.signCanvas} penColor='#000' <br> canvasProps={{ width:900,height:400,className: 'sigCanvas'}} /> <br> </Modal></pre>
<p> </p>
<p> </p><br><br>
来源：https://www.cnblogs.com/GOOGnine/p/12703443.html
頁:
[1]