ant design pro 实现审核图片盖章功能

介绍： 鼠标变成图章，点击后，在图片对应位置加盖公章功能。

如图所示：

源代码：

import { Card, Modal} from 'antd';
import React, { Component } from 'react';
import { connect } from 'dva';
const { confirm } = Modal;
@connect(({ project, loading }) => ({project: project,loading: loading.models.project,
}))
@Form.create()export default class AidCheck extends Component {constructor(porps) {super(porps);this.state = {value: {files:[]},//后台需要数据pointerArr:[],//鼠标图案cursorImg:'url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur), auto',//章图案chapterImg:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1523059142,3498552467&fm=26&gp=0.jpg'}}componentDidMount = () => {document.getElementById('img').style.cursor = this.state.cursorImg}handleSeal = () => {//盖章//提交pointerArr数据给后台}handCancelSeal = () => { //取消盖章let paras = document.getElementsByClassName('chapterImg');while (paras[0]) {paras[0].parentNode.removeChild(paras[0]);}this.setState({pointerArr:[]})}getPosition = (e,index)=>{e.persist()const { chapterImg } = this.statelet x = e.clientX - e.target.x;let y = e.clientY - e.target.y;//或者//let x = Math.abs(currentE.clientX - currentE.target.x);//let y = Math.abs(currentE.clientY - currentE.target.y);let arr = []confirm({title: '确认在此处盖章嘛?',content: '',okText: '确认',cancelText: '取消',onOk:()=>{let IMG = document.createElement('img')IMG.src = chapterImgIMG.style.width = '130px'IMG.style.height = '130px'IMG.className = 'chapterImg'IMG.style.position = 'absolute'IMG.style.top = e.pageY - 180 +'px'IMG.style.left = x-40+'px' //或者 //IMG.style.left = currentE.clientX - (currentE.target.offsetLeft + currentE.target.offsetWidth + 250 )+'px'document.getElementById('img').appendChild(IMG)arr.push({index,x,y})this.setState({pointerArr:arr})},onCancel() {console.log('Cancel');},});console.log(e,index ,x,y)console.log(x,y,'---')}render() {const { value} = this.state;return (<Card bordered={false} title="协议预览" style={{flex:1,marginLeft:'10px',position:'relative'}} id='img'>{value.files.map((i,index)=><img src={i.sourceUrl} style={{ width: '595px', height: 'auto', display:'block'}} onClick={(e)=>this.getPosition(e,index)}/>)}</Card> )}
}

ant design pro 实现审核图片盖章功能相关推荐

ant design pro 修改logo图片名称位置
修改网页title的图片在:public/icons目录下更换 Ant Design Pro 的 logo 和名称: 位置:/public/favicon.png 只须将制作好的公司logo或者图片 ...
Ant design pro (九) 修改Title 图标等小功能
一. 关于界面菜单及整体颜色风格修改 1. 直接修改 config/defaultSettings.ts 内部直接修改 2. 辅助修改 Ant Design Pro预览界面在预览界面中选择设置好之后 ...
基于ant design pro的前后端分离的小型餐馆管理系统
安装配置前端下载代码 antDesignProLearning-front 安装依赖,在命令行输入命令npm install或yarn 官方推荐使用 tyarn 来进行包管理,可以极大地减少 in ...
ant design pro（一）安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念编程领域中的"脚手架(Scaffolding)"指的是能够快速搭建项目"骨架"的一类工具.例如大多数的React项目都有src,p ...
使用ant design Pro开发项目的小结
一.关于上手. 1. 关于ant design Pro的介绍,自己看官网,大致上可以理解为ant design(组件库) ant design Pro (完整的项目) dva(路由数据流管理)的组合 ...
Ant Design Pro v4 is Here
Ant Design Pro v4 is Here 距离 Pro 的上个版本发布已经过去了 8 个月,Pro 也进行了许多的迭代,但是大部分更新仍然以修复 bug 为主.在此期间我们遇到了许多使用 P ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
Ant design pro入坑指南
最近接到一个后台开发的项目,需要对接业务系统提取数据,大部分时间在PC上用,但是在手机上要勉强能看.对方只给了提取数据的接口,对于界面风格.布局排版等没有明确要求,只说不要太丑就可以了. 于是,开始着 ...
Ant Design Pro 企业级后台实战（73 个视频）
Ant Design Pro 企业级后台实战(73 个视频) Ant Design Pro 企业级后台实战 #1 介绍(声音已调到毫无杂音_) Ant Design Pro 企业级后台实战 #2 学习 ...

ant design pro 实现审核图片盖章功能

ant design pro 实现审核图片盖章功能相关推荐

最新文章

热门文章