推荐几款业务开发中常用的插件

一、签名插件

react-signature-canvas

使用场景

react-signature-canvas，它是一个开源的React库，可以在设备上进行签字，完成订单打印等功能

效果案例

插件地址

www.npmjs.com/package/rea…

在线测试地址

codesandbox.io/s/react-sig…

安装

npm i react-signature-canvas -D

注意react 版本16.3x及以上

实现

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import SignaturePad from 'react-signature-canvas'
import styles from './styles.module.css'
 
class adapterId extends Component {
    constructor(props, context) {
    super(props, context);
        this.state = {
                imgUrl：'',
                isShow:false,
                imgData:''
        }
       this.sigCanvas = React.createRef(null)
 }
sigCanvas = {
  clear: () => {},
  toDataURL: (param) => {
        return "";
  },
};
resetSignBtn=() =>{
  console.log("2313131")
  this.sigCanvas.clear()
}
saveSignBtn() {
          const imgUrl = this.sigCanvas.toDataURL("image/png");
          console.log("读取",imgUrl, null)
          // handleSaveImgUrl(imgUrl) //可能上传oss
          this.setState({ imgUrl: imgUrl });
}
  render () {
   return (
       <div className="canvas_box">
            <div className="canvas_box_item">
                 <SignatureCanvas
                  penColor="black"
                  ref={(ref) => { this.sigCanvas = ref }}
                  canvasProps={{ width:400, height: 300, className: 'sigCanvas' }}
                />
            </div>
	</div>
        <div className="btn_box">
                <div className=""  onClick={() => this.resetSignBtn()}>
                        清除
                </div>
                <div className=""  onClick={() => this.saveSignBtn()}>
                        保存
                </div>
        </div>
   ) 
  }
}
 
module.exports = adapterId;

展示效果

当然你也可以封装成一个独立的组件，或者hooks形式

二、网页转为图片插件

html2canvas

使用场景

html2canvas 需要将一个背景图+动态获取如商品详情信息+活动二维码拼接成一张图片，用户可长按保存最终图片，以下是几种常见的业务场景

1. 生成截图

html2canvas可以将整个视图或是特定的HTML节点转化成Canvas图像，因此它可以方便地生成截图。比如，在网页上预览图片时，用户可以使用它生成图片的截图，以便于用户下载、收藏或分享。

2. 生成海报

html2canvas可以将HTML节点转化成Canvas图像，因此它可以用来生成海报。比如，在一些购物网站上，它可以根据用户的选购商品生成海报，以便于用户分享到社交媒体上或是保存到本地。

3. 实现打印功能

html2canvas可以将HTML节点转化成Canvas图像，因此它可以用来实现打印功能。比如，在后台管理系统中，用户可以使用它先将需要打印的内容转化成Canvas图像，然后再使用浏览器的打印功能将其打印

效果案例

点击按钮后弹出图层，将页面上的图片+文案转为Canvas图片，然后长按保存到本地，PC上的效果是右键图平另存为，

插件地址

www.npmjs.com/package/htm…

安装

npm i html2canvas -D

实现

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import html2canvas from 'html2canvas''
import styles from './styles.module.css'

class adapterId extends Component {
    constructor(props, context) {
        super(props, context);
            this.state = {
                isShow:false,
                imgData:''
            }
        this.sigCanvas = React.createRef(null)
    }
    check=()=>{
      html2canvas(document.querySelector('#content'), {
            useCORS: true, // 【重要】开启跨域配置
            scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
            allowTaint: true, // 允许跨域图片
             }).then((canvas) => {
            const imgData = canvas.toDataURL('image/jpeg', 1.0);
            console.log('转换DOM', imgData,null)
            this.setState({imgData,isShow:!this.state.isShow},() => {
                    this.longPress()
            })		
        });
    }
    longPress = () => {
	  this.timeout = 0
	  this.element.current && this.element.current.addEventListener('touchstart', this.touchstart, false)
	  this.element.current && this.element.current.addEventListener('touchend', this.touchend, false)
}
    touchstart = () => {
    // 长按时间超过800ms，则执行传入的方法
    this.timeout = setTimeout(this.check, 800)
	}
    render () {
        return ( 
            <div  className="adapter_box"> 
                <div className="content" id="content"> 
                    <div className="content_item"> 
                        <img src="转存失败，建议直接上传图片文件 https://lindon-website.oss-cn-shenzhen.aliyuncs.com/Drawing/2023.06.09.11.05.20.jpg" crossorigin="anonymous" class="originalImage" alt="转存失败，建议直接上传图片文件"> 
                     </div>
                     <p>需求需求需求</p><span  onClick={this.check}>点击</span> 
                    </div> 
                </div>
                {
                    this.state.isShow && (<div className="mask" onClick={this.closeModal}>
  		<img src={this.state.imgData} ref={this.element} />
    				
            </div>)
    	
            }
        )
    }
}

module.exports = adapterId;

注意事项：

1：图片跨域, img标签添加属性 crossorigin="anonymous" class="originalImage"

2: 服务端设置为：Access-Control-Allow-Origin:*

3:使用html2canvas把html转成canvas

4:使用canvas.toDataURL得到base64

5: base64赋值给img标签的url

另外几点建议事项

1：引入三方插件时考虑 ; Weekly Downloads周下载量

2：包扩展性，兼容性及需要的node,react版本支持信息

3：包的大小，对整体项目build体积的影响

4：如果你使用的是vscode ，建议vscode中安装一个 Import Cost 插件，导入的包可知道大小

5：插件的文档及使用说明完整，更重要的一点插件自身依赖的包有多少

项目包依赖检查及依赖可视化。请前往：

www.yuque.com/lufeilizhix…

如有对您有帮助，请点赞，欢迎纠正，留言探讨，感谢