网站关键词有什么用招工网

当前位置： 首页 > news >正文

网站关键词有什么用,招工网,绍兴做微网站,网站设计中遇到的问题客户那边文档相当的多#xff0c;目前需要协助其将文档转为数据写入数据库#xff0c;并与其他系统进行数据共享及建设#xff0c;所以不得不搞一个识别的功能#xff0c;用户上传PDF文档后#xff0c;对于关键信息点进行识别入库#xff01; 以下为核心代码#xff0c… 客户那边文档相当的多目前需要协助其将文档转为数据写入数据库并与其他系统进行数据共享及建设所以不得不搞一个识别的功能用户上传PDF文档后对于关键信息点进行识别入库 以下为核心代码直接分享到中午吃饭时间了就大概分享一下。 canvas idimgCanvas styleborder:1px solid rgb(230,230,230)/canvas initCanvas() {let rectArr []let currAreas []let canvasEle document.getElementById(imgCanvas)let elRef this.\(refs.canvaxbox// canvasEle.width elRef.clientWidthcanvasEle.height elRef.clientHeightcanvasEle.width (210 / 297) * elRef.clientHeightlet ctx canvasEle.getContext(2d)// 给矩形的设置颜色ctx.strokeStyle #448ef7this.saveCtx ctxlet drawRect (x1, y1, x2, y2) {let rectWidth Math.abs(x2 - x1)let rectHeight Math.abs(y2 - y1)let endX Math.min(x1, x2)let endY Math.min(y1, y2)// 绘制之前先清空之前实时移动产生的多余的矩形路径ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)ctx.strokeStyle #448ef7// 绘制之前那些存储在 this.drawedAreas 数组中的矩形if (this.img) {ctx.drawImage(this.img, 0, 0, canvasEle.width, canvasEle.height)}currAreas [endX, endY, rectWidth, rectHeight]this.drawedAreas.forEach(element {ctx.beginPath();ctx.strokeRect(...element)ctx.stroke();});// 开始本次路径ctx.beginPath();// 绘制本次的矩形路径ctx.rect(...currAreas);// 开始填充矩形ctx.stroke();}let canvasMoveHandler (e) {drawRect(rectArr[0], rectArr[1], e.offsetX, e.offsetY)}let canvasMouseUpHandler () {this.drawedAreas.push(currAreas)canvasEle.removeEventListener(mousemove, canvasMoveHandler)canvasEle.removeEventListener(mouseup, canvasMouseUpHandler)}// 给canvas注册事件按下事件let canvasDownHandler (e) {if (this.toolsIndex 1) {rectArr [e.offsetX, e.offsetY]// 按下的时候需要注册移动事件canvasEle.addEventListener(mousemove, canvasMoveHandler)// 抬起事件canvasEle.addEventListener(mouseup, canvasMouseUpHandler)}}canvasEle.addEventListener(mousedown, canvasDownHandler) }, 以上是核心代码绑定点击及拖动事件绘制待定区域 页面整体代码包含一些测试数据我没有删除你自己进行分析删除即可. templatediv classapp-container stylepadding: 0px;div classtool-box flex-row w-100el-button typeprimary iconel-icon-upload clickuploadVisible !uploadVisible上传PDF文档/el-buttonel-button typeprimary iconel-icon-upload2 clickbackOneStep回退/el-buttonel-button typedanger clickclearAll重置/el-button!-- el-button sizemini typesuccess clicksavePoints保存/el-button --/divdiv classcontainer-view flex-rowdiv classleft-view flex-row jc-arounddiv classcover-viewel-scrollbar classw-100 h-100 flex-rowdiv classw-100 flex-col styleheight: auto;background-color:rgb(245,245,245)div classcover-item-view flex-col v-for(item, index) in coverList :keyindexclickselOneItemAction(index) v-loadingitem.loadingel-image stylewidth: 100%; height: auto;background-color:rgb(230,230,230):srcitem.url fitscale-down:class{ border-hi: index crrentIndex }/el-imagespan v-ifindex coverList.length - 1 styleheight: 5px;display:inline-blockclassw-100/span/div/div/el-scrollbardiv v-ifcoverList.length 0 classplace-text flex-row jc-centerspan classplace-span未上传文档/span/div/divdiv classcanvas-wrap flex-row jc-center refcanvaxboxv-loadingcrrentIndex 0 coverList[crrentIndex].loadingcanvas idimgCanvas styleborder:1px solid rgb(230,230,230)/canvasdiv classview-tools flex-colel-tooltip effectdark content全页识别 placementrightdiv classw-100 flex-row jc-center styleheight: 50%; clickreconizerAction(0)i classel-icon-full-screen stylefont-size:20px:class{ toolsHili: toolsIndex 0 }/i/div/el-tooltipel-tooltip effectdark content区域识别 placementrightdiv classw-100 flex-row jc-centerstyleheight: 50%;border-top:1px solid rgb(200,200,200) clickreconizerAction(1)i classel-icon-crop stylefont-size:20px:class{ toolsHili: toolsIndex 1 }/i/div/el-tooltip/div/div/divdiv classright-viewel-scrollbar classresult-viewdiv classw-100 flex-col v-for(item, idex) in resultListdiv classcard-view top-margindiv classflex-row jc-endi classel-icon-close stylefont-size: 20px;padding:0px 0px 15px 0pxclickcloseItem(item)/i/divel-form :refresultForm-\){idex} :modelitem label-width80px classw-100el-form-item label字段名称el-input classw-100 v-modelitem.name/el-input/el-form-itemel-form-item label字段类型el-select classw-100 v-modelitem.optionsValue placeholder请选择el-option v-forbtem in item.optionsList :labelbtem.label:valuebtem.value/el-option/el-select/el-form-item/el-formdiv classflex-rowspan classel-form-itemlabel stylewidth:80px;识别结果/spanspan stylewidth:calc(100% - 100px);font-size:14px;识别结果/span/div/div/div/el-scrollbar/div/div!–表单组件–el-dialog append-to-body :close-on-click-modalfalse :visible.syncuploadVisible title上传PDF文档width500pxel-upload classw-100 refupload :limit1 :before-uploadbeforeUpload :auto-uploadfalse drag:headersheaders :on-successhandleSuccess :on-errorhandleError :actionpdfUploadApii classel-icon-upload/idiv classel-uploadtext将文件拖到此处或em点击上传/em/divdiv classel-uploadtip slottip只能上传txt doc pdf ppt pps xlsx xls docx文件且不超过10M/div/el-uploaddiv slotfooter classdialog-footerel-button typetext clickuploadVisible false取消/el-buttonel-button :loadingloading typeprimary clickdoUpload确认/el-button/div/el-dialog/div /templatescript import { mapGetters } from vuex import { getToken } from /utils/auth //https://www.cnblogs.com/IwishIcould/p/18360209 export default {components: {},mixins: [],data() {return {id: null,name: ,headers: { Authorization: getToken() },coverList: [{url:https://gd-hbimg.huaban.com/ba2dd60c93a9ef06595825d48c71e863a58f2cbe3f9f0-EQK5rk_fw1200,width:1200,height:1697},{url:https://gd-hbimg.huaban.com/ba2dd60c93a9ef06595825d48c71e863a58f2cbe3f9f0-EQK5rk_fw1200,width:1200,height:1697},{url:https://gd-hbimg.huaban.com/ba2dd60c93a9ef06595825d48c71e863a58f2cbe3f9f0-EQK5rk_fw1200,width:1200,height:1697},{url:https://gd-hbimg.huaban.com/ba2dd60c93a9ef06595825d48c71e863a58f2cbe3f9f0-EQK5rk_fw1200,width:1200,height:1697},{url:https://gd-hbimg.huaban.com/ba2dd60c93a9ef06595825d48c71e863a58f2cbe3f9f0-EQK5rk_fw1200,width:1200,height:1697},{url:https://gd-hbimg.huaban.com/ba2dd60c93a9ef06595825d48c71e863a58f2cbe3f9f0-EQK5rk_fw1200,width:1200,height:1697}],submitData: [// {polygon:{x1:0,y1:0,x2:1920,y2:0,x3:1920,y3:1080,x4:0,y4:1080}},{ polygon: { x1: 700, y1: 273, x2: 975, y2: 278, x3: 1107, y3: 368, x4: 718, y4: 354 } },{ polygon: { x1: 49, y1: 32, x2: 183, y2: 35, x3: 181, y3: 100, x4: 55, y4: 97 } },{ polygon: { x1: 433, y1: 250, x2: 706, y2: 253, x3: 707, y3: 392, x4: 435, y4: 393 } },{polygon: {x1: 45,y1: 539,x2: 193,y2: 538,x3: 192,y3: 622,x4: 41,y4: 623,x5: 42,y5: 623}}],resultList: [{label: ,value: ,optionsValue: ,optionsList: [{label: 常规,value: }]}, {label: ,value: ,optionsValue: ,optionsList: [{label: 常规,value: }]}, {label: ,value: ,optionsValue: 0,optionsList: [{label: 常规,value: 0}]}],loading: false,toolsIndex: 0,uploadVisible: false,// 所有的矩形信息drawedAreas: [],crrentIndex: 0}},computed: {…mapGetters([baseApi,pdfUploadApi]),scrollWrapper() {return this.\(refs.scrollbar.\)refs.wrap}},created() {},mounted() {this.initCanvas()this.renderImgCanvas(0)},methods: {initCanvas() {let rectArr []let currAreas []let canvasEle document.getElementById(imgCanvas)let elRef this.\(refs.canvaxbox// canvasEle.width elRef.clientWidthcanvasEle.height elRef.clientHeightcanvasEle.width (210 / 297) * elRef.clientHeightlet ctx canvasEle.getContext(2d)// 给矩形的设置颜色ctx.strokeStyle #448ef7this.saveCtx ctxlet drawRect (x1, y1, x2, y2) {let rectWidth Math.abs(x2 - x1)let rectHeight Math.abs(y2 - y1)let endX Math.min(x1, x2)let endY Math.min(y1, y2)// 绘制之前先清空之前实时移动产生的多余的矩形路径ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)ctx.strokeStyle #448ef7// 绘制之前那些存储在 this.drawedAreas 数组中的矩形if (this.img) {ctx.drawImage(this.img, 0, 0, canvasEle.width, canvasEle.height)}currAreas [endX, endY, rectWidth, rectHeight]this.drawedAreas.forEach(element {ctx.beginPath();ctx.strokeRect(...element)ctx.stroke();});// 开始本次路径ctx.beginPath();// 绘制本次的矩形路径ctx.rect(...currAreas);// 开始填充矩形ctx.stroke();}let canvasMoveHandler (e) {drawRect(rectArr[0], rectArr[1], e.offsetX, e.offsetY)}let canvasMouseUpHandler () {this.drawedAreas.push(currAreas)canvasEle.removeEventListener(mousemove, canvasMoveHandler)canvasEle.removeEventListener(mouseup, canvasMouseUpHandler)}// 给canvas注册事件按下事件let canvasDownHandler (e) {if (this.toolsIndex 1) {rectArr [e.offsetX, e.offsetY]// 按下的时候需要注册移动事件canvasEle.addEventListener(mousemove, canvasMoveHandler)// 抬起事件canvasEle.addEventListener(mouseup, canvasMouseUpHandler)}}canvasEle.addEventListener(mousedown, canvasDownHandler)},// 上传文件doUpload() {this.loading truethis.\)refs.upload.submit()},beforeUpload(file) {let isLt2M trueisLt2M file.size / 1024 / 1024 100if (!isLt2M) {this.loading falsethis.\(message.error(上传文件大小不能超过 100MB!)}return isLt2M},handleSuccess(response, file, fileList) {this.loading falsethis.uploadVisible falsethis.\)modal.msgSuccess(上传成功)this.\(refs.upload.clearFiles()response.documents.forEach(p {p.loading truep.url this.baseApi / p.url})this.coverList response.documentsthis.renderImgCanvas(0)},// 监听上传失败handleError(e, file, fileList) {const msg JSON.parse(e.message)this.\)notify({title: msg.message,type: error,duration: 2500})this.loading false},renderImgCanvas(index) {// 计算宽高比this.crrentIndex indexlet canvasEle document.getElementById(imgCanvas)let ww canvasEle.width // 画布宽度let wh canvasEle.height // 画布高度let e this.coverList.objectAtIndex(index)let iw e.width // 图片宽度let ih e.height // 图片高度if (iw / ih ww / wh) { // 以高为主e.ratio ih / whe.canvasHeight whe.canvasWidth wh * iw / ih}else { // 以宽为主e.ratio iw / wwe.canvasWidth wwe.canvasHeight ww * ih / iw}// 初始化画布大小canvasEle.width e.canvasWidthcanvasEle.height e.canvasHeighte.loading true// 图片加载绘制let img document.createElement(img)img.src e.urlimg.onload () {e.loading falsethis.saveCtx.drawImage(img, 0, 0, e.canvasWidth, e.canvasHeight)}this.img img},clearAll() { // 清空所有绘制区域let canvasEle document.getElementById(imgCanvas)this.saveCtx.clearRect(0, 0, canvasEle.width, canvasEle.height);if (this.img) {this.saveCtx.drawImage(this.img, 0, 0, canvasEle.width, canvasEle.height)}this.drawedAreas []},savePoints() { // 将画布坐标数据转换成提交数据let objectPoints []// object: [{polygon: {x1:700,y1:273,x2:975,y2:278,x3:1107,y3:368,x4:718,y4:354} }]objectPoints currAreas.map(area {let polygon {}area.forEach((point, i) {polygon[x\({i 1}] Math.round(point[0] * this.ratio)polygon[y\){i 1}] Math.round(point[1] * this.ratio)})return {polygon: polygon}})this.submitData objectPointsconsole.log(最终提交数据, objectPoints)},handleScroll(e) {const eventDelta e.wheelDelta || -e.deltaY * 40const \(scrollWrapper this.scrollWrapperlet scrolled \)scrollWrapper.scrollLeft eventDelta / 4\(scrollWrapper.scrollLeft scrolledthis.\)emit(scrolled, scrolled)},selOneItemAction(index) {this.crrentIndex index},reconizerAction(tag) {this.toolsIndex tagif (tag 0) {this.clearAll()}},backOneStep() {let canvasEle document.getElementById(imgCanvas)this.saveCtx.clearRect(0, 0, canvasEle.width, canvasEle.height)// 绘制之前那些存储在 this.drawedAreas 数组中的矩形if (this.img) {this.saveCtx.drawImage(this.img, 0, 0, canvasEle.width, canvasEle.height)}this.drawedAreas.removeLastObject()this.drawedAreas.forEach(element {this.saveCtx.beginPath();this.saveCtx.strokeRect(…element)this.saveCtx.stroke();});}} } /scriptstyle langscss scoped import ./dicomStyles/aiStyle.scss;::v-deep {.result-view {.is-horizontal {height: 0px;left: 0px;display: none;}}.view-content {.is-horizontal {display: none;}.el-scrollbarwrap {overflow-x: hidden;margin-bottom: 0px !important;}//横向滚动.el-scrollbarview {display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}::-webkit-scrollbar-thumb {background-color: #888;}::-webkit-scrollbar {height: 8px;}}.el-form-item {margin-bottom: 10px;}.el-inputinner {border-radius: 0px;}.el-scrollbarwrap {overflow-x: hidden;}.el-image-viewerwrapper {top: 55px;}.el-imageerror,.el-imageplaceholder {background: none;}.el-form-item__label {font-weight: 500;}.el-upload {width: 100%;}.el-upload-dragger {width: 100%;} } /style样式文件 .app-container{background-color: rgb(245, 245, 245); }.cover-view{position: relative;width: 180px;height: 100%;background-color: white; }.cover-item-view{width: 100%;height: auto; }.tool-box {width: 100%;height: 54px;padding: 5px 30px;border-bottom: 5px solid rgb(245, 245, 245);background-color: white; }.toolsHili{color: #0286df; }.view-tools{position: absolute;left: 0px;top: calc(50% - 50px);width: 34px;height: 100px;background-color: white;border-top-right-radius: 10px;border-bottom-right-radius: 10px;border: 1px solid rgb(200,200,200);border-left: none; }.container-view{width: 100%;height: calc(100% - 64px); }.left-view{position: relative;width: 70%;height: 100%;background-color: rgb(245, 245, 245); }.right-view{width: 30%;height: 100%; }.flex-row{display: flex;flex-direction: row;justify-content: flex-start;align-items: center; }.jc-end{justify-content: flex-end; }.jc-center{justify-content: center;align-items: center; }.jc-around{justify-content: space-around; }.jc-between{justify-content: space-between; }.result-view{position: relative;width: 100%;height: 100%;background-color: rgb(245, 245, 245) }.flex-col{display: flex;flex-direction: column;justify-content: flex-start;align-items: center; }.top-margin{margin-top: 15px; }.card-view{width: 90%;background-color: white;padding: 15px;border-radius: 10px; }.w-100{width: 100%; }.h-100{height: 100%; }.view-content{width: 100%;height: calc(100% - 10px); }.canvas-wrap {position: relative;width: calc(100% - 190px);height: 100%;background-color: white; }.place-text{position: absolute;top: 0;left: 0;width: 100%;height: 100%; }.place-span {font-size: 15px;color: #666666; }.border-hi{border: 1px solid #0286df; }.canvas-view{position: absolute;left: 0;top: 0; }