CN113961175B

CN113961175B - Method for processing picture text and computer readable storage medium

Info

Publication number: CN113961175B
Application number: CN202111536405.3A
Authority: CN
Inventors: 谢涛
Original assignee: CLP Cloud Digital Intelligence Technology Co Ltd
Current assignee: Zhongdian Cloud Computing Technology Co ltd
Priority date: 2021-12-16
Filing date: 2021-12-16
Publication date: 2022-05-20
Anticipated expiration: 2041-12-16
Also published as: CN113961175A

Abstract

The invention discloses a method for processing a picture text and a computer readable storage medium, which carry out various editing and extracting operations on a picture to be processed by setting a special editing assembly and carrying out various editing and extracting operations on the picture to be processed by the editing assembly, thereby realizing the operations of moving, magnifying and reducing a framed picture, magnifying and reducing an original picture, moving and the like, solving the problem that the prior art can not carry out good editing operation on a framed selection area in the picture, and finally greatly improving the user experience.

Description

Method for processing picture text and computer readable storage medium

Technical Field

The present invention relates to the field of computer technologies, and in particular, to a method for processing a picture text and a computer-readable storage medium.

Background

The AI Zhongtai in 2021 and 4 months has a requirement of self-defining text recognition, requires that a user can select a text on a picture by using a mouse, supports the functions of dragging, zooming, moving and the like of a selected area, displays text information of the selected area in real time, and has tools with similar functions, such as hundredths and the like, but the realization of the tools is inconsistent with the requirement design of people and belongs to business software, and some public library tools have simpler and single functions and cannot meet the requirement. For example, only the selection of the frame of the picture is supported, the picture of the selected part of the frame is copied, and the movement, the magnification and the reduction of the selected picture are not supported, and the magnification, the reduction, the movement and the like of the original picture are not supported.

Disclosure of Invention

The invention provides a method for processing a picture text and a computer readable storage medium, which are used for solving the problem that the prior art can not well edit a frame selection area in a picture.

In a first aspect, the present invention provides a method for processing a picture text, including: setting an editing component; the picture to be processed is edited, extracted and processed through the editing assembly; the editing and extracting processing comprises the steps of performing redisplay, adding, editing and deleting processing on a frame selection area on the picture to be processed and dynamically adjusting the size of the whole picture to be processed.

Optionally, editing the frame selection area on the picture to be processed includes: and carrying out amplification or reduction operation, format conversion and dynamic updating on the dragged picture position on the frame selection area.

Optionally, the frame selection area is a selected area on the picture to be processed.

Optionally, the editing component is a Konva component.

Optionally, the editing, extracting and processing the picture to be processed by the editing component includes: and creating an API of the rectangular element on the boxed area through Konva.

Optionally, after the rectangular rect object is created, the position, size and color attribute information of the rect object are set through rect.

Optionally, the editing and extracting the to-be-processed picture by the editing component further includes:

converting the rectangular object obtained by rect.setattrs into a picture text in base64 format through Konva.toImage, and setting the position, size, picture quality and scaling of the picture after format conversion and a callback function after picture capturing is successful.

Optionally, the method further comprises: the zoom size of the framing area is dynamically adjusted by konva.

Optionally, the picture to be processed is a canvas.

In a second aspect, the present invention provides a computer-readable storage medium, in which a signal-mapped computer program is stored, and the computer program, when executed by at least one processor, implements any one of the above-mentioned methods for processing picture texts.

The invention has the following beneficial effects:

according to the invention, through setting the special editing assembly and carrying out various editing and extracting operations on the picture to be processed through the editing assembly, the operations of moving, magnifying and reducing the framed picture, magnifying and reducing the original picture, moving and the like are realized, the problem that the well editing operation cannot be carried out on the framed selection area in the picture in the prior art is solved, and finally, the user experience is greatly improved.

The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.

Drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiments. The drawings are only for purposes of illustrating the preferred embodiments and are not to be construed as limiting the invention. Also, like reference numerals are used to refer to like parts throughout the drawings. In the drawings:

fig. 1 is a flowchart illustrating a method for processing a picture text according to a first embodiment of the present invention.

Detailed Description

Aiming at the problem that the prior art can not perform better editing operation on the frame selection area in the picture, the embodiment of the invention sets a special editing component and performs various editing and extracting operation processing on the picture to be processed through the editing component, thereby realizing the operations of moving, magnifying and reducing the frame selection picture, magnifying and reducing the original picture, moving the original picture and the like. The present invention will be described in further detail below with reference to the drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the invention and do not limit the invention.

A first embodiment of the present invention provides a method for processing a picture text, and referring to fig. 1, the method includes:

s101, setting an editing component;

in particular, the editing component described in embodiments of the present invention is a Konva component.

It should be noted that the picture according to the embodiment of the present invention is canvas.

In detail, Canvas is a tag newly added in HTML5 for generating an image in real time on a web page, and can manipulate the image content, which is basically a bitmap (bitmap) that can be operated by JavaScript. The Canvas object represents an HTML Canvas element- < Canvas >. It has no own behavior, but defines an API to support scripted client drawing operation; js of Konva: konva is an HTML5 Canvas JavaScript framework that enables interchangeability on the desktop and mobile sides by extending 2d context. Konva offers high performance animation, complement, node nesting, layout, filter, cache, event binding (desktop/mobile), etc. Konva can be used to draw graphics on stage, add events to graphics, move, zoom, and rotate graphics and support high performance animations even though thousands of graphics are involved;

s102, editing and extracting the picture to be processed through the editing assembly;

the embodiment of the invention performs playback, addition, editing and deletion processing on the frame selection area on the picture to be processed and dynamically adjusts the size of the whole picture to be processed through the editing component.

In addition, the editing of the frame selection area on the picture to be processed in the embodiment of the present invention is to perform an operation of enlarging or reducing, format conversion, and dynamic update of the position of the dragged picture on the frame selection area.

The frame selection area is a selected area on the picture to be processed.

In specific implementation, the embodiment of the invention creates an API of a rectangular element on the boxed area through konva. And after the rectangular rect object is created, the position, size and color attribute information of the rect object are set through rect. And converting the rectangular object obtained by rect.setattrs into a picture text in base64 format through Konva.toImage, setting the position, size, picture quality and scaling of the picture after format conversion, and intercepting a callback function after the picture is successfully intercepted. And dynamically adjusting the zoom size of the framing area by konva.

It should be noted that, in the implementation, a person skilled in the art may also set other components as needed to implement the above-described various editing functions on the picture, and the present invention is not limited to this.

Briefly, the embodiment of the present invention provides an image text capturing component, which is convenient for user-defined text recognition, and is implemented on the basis of the open source library of konva. Drawing a rectangular region on the picture by utilizing Konva.rect (); dynamically processing operations such as zooming in and zooming out of the current framed rectangular area through rect.setatters (); converting the selected area into a picture with base64 format by a Konva. Dynamically adjusting the size of the picture by a Konva.scale () method; dynamically updating the position of the dragged picture through Konva.

The invention realizes that the codes for editing and extracting the picture to be processed are as follows:

<KonvaEditor

style="height: calc(100vh - 198px)"

:delete-img-id="deleteImgId"

:high-light-id="highLightId"

:img-data="img"

:rect-obj-list="rectObjList"

@addImgRect="addImgRect"

@modifyImgRect="modifyImgRect"

@deleteImgRect="deleteImgRect"

@rectSelected="rectSelected"

@windowChanged="windowChanged"

/>

however, the editing codes for pictures in the prior art are only:

after comparison, the invention can dynamically update the size and the position of the existing frame selection area in real time, convert the selected frame selection area into the corresponding picture content, support the enlargement, the reduction and the movement of the whole picture, support the redisplay of the defined rectangular frame selection area according to background data, and add, edit, delete and the like, thereby realizing the arbitrary operation of the picture according to the needs and finally improving the user experience.

The process according to the invention will be explained and illustrated in detail below by means of a specific example:

1. through the external picture address obtained by imgData propes, if the external picture source is changed, the component is reinitialized

watch: {

imgData(val) {

this.stage.destroy()

this.init()

},

2. Whether rectangular area playback needs to be carried out according to background api data is determined through the recabjList prop, and if the attribute exists and changes, rectangular elements are drawn on the picture;

rectObjList(val) {

this.drawRectByObjList(val)

}

3. monitoring a mousedown event of a mouse, recording coordinates (x, y) when the event is triggered, and calling a Konva.rect () method to draw a rectangular object at the position;

mouseDownHandler(e) {

// remove graphic selection box if clicking on the blank

if (this.isOnDrag) {

return

}

if (e.target === this.img) {

this.stageMousedown('rect', e)

// remove graphic selection box

this.stage.find('Transformer').destroy()

this.layer.draw()

return

}

if (!e.target.hasName('rect')) {

return

}

// remove graphic selection box

this.stage.find('Transformer').destroy()

// assigning value to currently clicked object to graph now

this.graphNow = e.target

// create graphic Box event

const tr = new Konva.Transformer({

BorderStroke:'# 000',// dotted color

BorderStroke Width: 1,// dotted line size

Borderdash: [1],// dashed line spacing

keepRatio: false,// unequal scaling,

rotateEnabled: false

})

this.layer.add(tr)

this.rectSelected(e.target)

tr.attachTo(e.target)

this.layer.draw()

},

4. monitoring a mousecover event of the mouse, and dynamically setting the size of the rectangle created in the previous step according to the moved mouse coordinate;

5. monitoring a mouse up event of the mouse, stopping drawing a rectangle, calling a Konva.

6. Monitoring transformand and dragend events of the Konva rect rectangular object, and calling a rect.setattrs () method to update the size and position change of the rectangular object in real time;

7. monitoring the change of the deleteImgId propes and deleting the corresponding rectangular object in real time;

generally speaking, the invention provides a browser picture text editing and extracting component based on a mobile terminal, which is developed based on Konva.js, realizes a picture text frame selection and extracting function by utilizing a basic api, can simultaneously realize the operations of amplifying, reducing, moving and facilitating text frame selection, supports the operations of adding, deleting, modifying and displaying (inquiring) a text frame, and can also update the sizes of a picture and a frame selection rectangle in real time according to the proportion according to the size change of a browser window.

A second embodiment of the present invention provides a computer-readable storage medium storing a signal-mapped computer program, which when executed by at least one processor implements the method for processing picture texts as described in any one of the first embodiments of the present invention.

The relevant content of the embodiments of the present invention can be understood by referring to the first embodiment of the present invention, and will not be discussed in detail herein.

Although the preferred embodiments of the present invention have been disclosed for illustrative purposes, those skilled in the art will appreciate that various modifications, additions and substitutions are possible, and the scope of the invention should not be limited to the embodiments described above.

Claims

1. A method for processing picture texts is characterized by comprising the following steps:

setting an editing component;

the picture to be processed is edited, extracted and processed through the editing assembly;

the editing and extracting processing comprises the steps of performing redisplay, adding, editing and deleting processing on a frame selection area on the picture to be processed and dynamically adjusting the size of the whole picture to be processed;

the editing, extracting and processing of the picture to be processed through the editing assembly comprises the following steps:

creating an API of a rectangular element on the boxed area through Konva.rect, and transferring parameters through the API to draw a corresponding rectangular rect object on the boxed area;

after a rectangular rect object is created, setting the position, size and color attribute information of the rect object through rect.setATerts;

through the editing assembly, the picture to be processed is edited, extracted and processed, and the method further comprises the following steps: converting the rectangular object obtained by rect.setattattrs into a picture text in base64 format through Konva.toImage, and setting the position, size, picture quality and scaling of the picture after format conversion and a callback function after picture capturing is successful;

editing the frame selection area on the picture to be processed, including:

carrying out amplification or reduction operation, format conversion and dynamic updating on the frame selection area;

the frame selection area is a selected area on the picture to be processed;

the method further comprises the following steps: the zoom size of the framing area is dynamically adjusted by konva.

2. The method of claim 1,

the editing component is a Konva component.

3. The method according to claim 1 or 2,

the picture to be processed is a canvas.

4. A computer-readable storage medium, in which a signal-mapped computer program is stored, which, when being executed by at least one processor, carries out the method of processing a picture text according to any one of claims 1 to 3.