CN109785402A - A kind of H5 picture method of cutting out - Google Patents
A kind of H5 picture method of cutting out Download PDFInfo
- Publication number
- CN109785402A CN109785402A CN201811520905.6A CN201811520905A CN109785402A CN 109785402 A CN109785402 A CN 109785402A CN 201811520905 A CN201811520905 A CN 201811520905A CN 109785402 A CN109785402 A CN 109785402A
- Authority
- CN
- China
- Prior art keywords
- picture
- crop box
- cut
- region
- cutting out
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Editing Of Facsimile Originals (AREA)
- Image Processing (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of H5 picture method of cutting out, include the following steps: a, input [file] is called to obtain picture path；B, picture is converted to base64 data；C, base64 data needed for being reassembled into a full picture are calculated according to the position that picture crop box is related to；D, the base64 data after calculating are converted to the picture after cutting.The H5 picture method of cutting out does not quote jQuery so opposite light weight, while being also suitable for the end PC, as soon as only needing to quote the library js when needing this function, call by reference be can be used in the page.
Description
Technical field
The present invention relates to HTML5 technical field, especially a kind of H5 picture method of cutting out.
Background technique
H5 picture cuts the dependence library jQuery mostly and develops than the heavier mobile terminal that is unfavorable at present, and technical staff quotes also phase
To loaded down with trivial details, in addition user is while uploading pictures, because mobile phone pixel difference Aspect Ratio is also different, so uploading pictures is big
Small scale is different.
Summary of the invention
To solve problems of the prior art, the present invention provides a kind of H5 picture method of cutting out, and this method is than existing
Some code light weights and it is not based on jQuery, the frame problem of the incompatible jQuery in present mobile terminal is made to have obtained better solution
Certainly, while he is compatible with the end PC, and reference frame is also comparatively simple, to the cutting of the frame of selection also adjustable ratio.
The technical solution adopted by the present invention is that:
A kind of H5 picture method of cutting out, includes the following steps:
A, input [file] is called to obtain picture path；
B, picture is converted to base64 data；
C, base64 number needed for being reassembled into a full picture is calculated according to the position that picture crop box is related to
According to；
D, the base64 data after calculating are converted to the picture after cutting.
JavaScript exploitation is preferably based on to realize.
Preferably, step b includes the following steps:
Two-dimensional Cartesian coordinate system is established as origin using a point in the picture region of picture to be cut, calculates figure to be cut
The linear equation of the four edges of piece.
Preferably, step c includes the following steps:
According to the location information of crop box, the coordinate of four endpoints of crop box under same two-dimensional Cartesian coordinate system is determined
Value；
According to linear equation and coordinate value, judge whether four endpoints of the crop box are located at the linear equation and constitute
Region in,
If it is, the overlay area of crop box is fully located in the picture region of picture to be cut, using crop box into
Row calculates；
Otherwise not exclusively it is located at, the overlay area of crop box is adjusted to picture region to be cut, after adjustment
Crop box calculated.
Preferably, according to linear equation and coordinate value, judge whether four endpoints of the crop box are located at the straight line
In the region that equation is constituted, comprising:
According to linear equation, four functions for corresponding to the four edges of picture to be cut are generated；
Four endpoints of crop box are substituted into respectively in four functions corresponding to the four edges of picture to be cut；
For each function, judge four endpoints of crop box substitute into the function result whether jack per line；
If equal jack per line, further directed to two functions corresponding to every group each other side of opposite side, the four of crop box are judged
A endpoint substitute into two functions result whether contrary sign, if equal contrary sign, four endpoints of the crop box are located at described
In the region that linear equation is constituted.
Preferably, the overlay area of crop box is adjusted to before picture region to be cut, further includes:
The first message prompt of the picture region for prompting crop box to exceed picture to be cut is shown to user.
Preferably, the overlay area of crop box is adjusted to before picture region to be cut, further includes:
It shows to user and disappears for asking whether to receive system overlay area is adjusted second to picture region automatically
Breath prompt；
After receiving the affirmative operation that user makes for second message prompt, execute the area of coverage of crop box
Domain is adjusted to the step in picture region to be cut.
The beneficial effects of the present invention are:
1, this method than existing code light weight and is not based on jQuery, makes the frame of the incompatible jQuery in present mobile terminal
Frame problem has obtained better solution, while he is compatible with the end PC, and reference frame is also comparatively simple, can also to the cutting of the frame of selection
To adjust ratio.
2, the present invention can for occur angle rotation picture, by comparing the overlay area of crop box whether fall into
The mode in the picture region of picture is cut, determines which kind of cutting method specifically used, to guarantee in user to generation angle
When the picture of rotation is cut, picture region of the crop box without departing from picture to be cut.
Specific embodiment
Below according to embodiment, the present invention is described in detail.
Embodiment
A kind of H5 picture method of cutting out, includes the following steps:
A, input [file] is called to obtain picture path；
B, picture is converted to base64 data；
C, base64 number needed for being reassembled into a full picture is calculated according to the position that picture crop box is related to
According to；
D, the base64 data after calculating are converted to the picture after cutting.
Specifically, it is realized based on JavaScript exploitation.
Step b includes the following steps: in one of the embodiments,
Two-dimensional Cartesian coordinate system is established as origin using a point in the picture region of picture to be cut, calculates figure to be cut
The linear equation of the four edges of piece.
Step c includes the following steps:
According to the location information of crop box, the coordinate of four endpoints of crop box under same two-dimensional Cartesian coordinate system is determined
Value；
According to linear equation and coordinate value, judge whether four endpoints of the crop box are located at the linear equation and constitute
Region in,
If it is, the overlay area of crop box is fully located in the picture region of picture to be cut, using crop box into
Row calculates；
Otherwise not exclusively it is located at, the overlay area of crop box is adjusted to picture region to be cut, after adjustment
Crop box calculated.
In one of the embodiments, according to linear equation and coordinate value, judge the crop box four endpoints whether
In the region that the linear equation is constituted, comprising:
According to linear equation, four functions for corresponding to the four edges of picture to be cut are generated；
Four endpoints of crop box are substituted into respectively in four functions corresponding to the four edges of picture to be cut；
For each function, judge four endpoints of crop box substitute into the function result whether jack per line；
If equal jack per line, further directed to two functions corresponding to every group each other side of opposite side, the four of crop box are judged
A endpoint substitute into two functions result whether contrary sign, if equal contrary sign, four endpoints of the crop box are located at described
In the region that linear equation is constituted.
It is assumed that four extreme coordinates values of crop box are respectively (ax1, ay1), (bx1, by1), (cx1, cy1), and (dx1,
Dy1), wherein the linear equation of a line is Ex+Fy+G=0 (E, F, G are a certain constant), then corresponding function be f (x, y)=
Ex+Fy+G can similarly acquire the function on other three sides.
Four endpoints of crop box are substituted into respectively in four functions corresponding to the four edges of picture to be cut, such as generation
Enter in the function of each edge and be all satisfied:
E*ax1+F*ay1+G≤0 and E*bx1+F*by1+G≤0 and E*cx1+F*cy1+G≤0 and E*dx1+
It sets up simultaneously F*dy1+G≤0；
Or E*ax1+F*ay1+G >=0 and E*bx1+F*by1+G >=0 and E*cx1+F*cy1+G >=0 and E*
Dx1+F*dy1+G >=it 0 sets up simultaneously.
Then further directed to two functions corresponding to every group each other side of opposite side, judge that four endpoints of crop box substitute into
The result of two functions whether contrary sign, calculation method is same as above, if equal contrary sign, four endpoints of the crop box are located at institute
In the region for stating linear equation composition.
The overlay area of crop box is adjusted to before picture region to be cut in one of the embodiments, is also wrapped
It includes:
The first message prompt of the picture region for prompting crop box to exceed picture to be cut is shown to user.
The overlay area of crop box is adjusted to before picture region to be cut in one of the embodiments, is also wrapped
It includes:
It shows to user and disappears for asking whether to receive system overlay area is adjusted second to picture region automatically
Breath prompt；
After receiving the affirmative operation that user makes for second message prompt, execute the area of coverage of crop box
Domain is adjusted to the step in picture region to be cut.
A specific embodiment of the invention above described embodiment only expresses, the description thereof is more specific and detailed, but simultaneously
Limitations on the scope of the patent of the present invention therefore cannot be interpreted as.It should be pointed out that for those of ordinary skill in the art
For, without departing from the inventive concept of the premise, various modifications and improvements can be made, these belong to guarantor of the invention
Protect range.
Claims (7)
1. a kind of H5 picture method of cutting out, which comprises the steps of:
A, input [file] is called to obtain picture path to be cut；
B, picture to be cut is converted to base64 data；
C, base64 data needed for being reassembled into a full picture are calculated according to the position that picture crop box is related to；
D, base64 data needed for reconfiguring picture are read and are converted to the picture after cutting.
2. H5 picture method of cutting out according to claim 1, which is characterized in that realized based on JavaScript exploitation.
3. H5 picture method of cutting out according to claim 1, which is characterized in that step b includes the following steps:
Two-dimensional Cartesian coordinate system is established as origin using a point in the picture region of picture to be cut, calculates picture to be cut
The linear equation of four edges.
4. H5 picture method of cutting out according to claim 3, which is characterized in that step c includes the following steps:
According to the location information of crop box, the coordinate value of four endpoints of crop box under same two-dimensional Cartesian coordinate system is determined；
According to linear equation and coordinate value, judge whether four endpoints of the crop box are located at the area that the linear equation is constituted
In domain,
If it is, the overlay area of crop box is fully located in the picture region of picture to be cut, counted using crop box
It calculates；
Otherwise not exclusively it is located at, the overlay area of crop box is adjusted to picture region to be cut, uses sanction adjusted
Frame is cut to be calculated.
5. H5 picture method of cutting out according to claim 4, which is characterized in that according to linear equation and coordinate value, judgement
Whether four endpoints of the crop box are located in the region that the linear equation is constituted, comprising:
According to linear equation, four functions for corresponding to the four edges of picture to be cut are generated；
Four endpoints of crop box are substituted into respectively in four functions corresponding to the four edges of picture to be cut；
For each function, judge four endpoints of crop box substitute into the function result whether jack per line；
If equal jack per line, further directed to two functions corresponding to every group each other side of opposite side, four ends of crop box are judged
Point substitute into two functions result whether contrary sign, if equal contrary sign, four endpoints of the crop box are located at the straight line
In the region that equation is constituted.
6. H5 picture method of cutting out according to claim 4, which is characterized in that by the overlay area of crop box adjust to
Before the picture region of cutting, further includes:
The first message prompt of the picture region for prompting crop box to exceed picture to be cut is shown to user.
7. H5 picture method of cutting out according to claim 6, which is characterized in that by the overlay area of crop box adjust to
Before the picture region of cutting, further includes:
It shows to user and is mentioned for asking whether to receive system overlay area is adjusted the second message to picture region automatically
Show；
After receiving the affirmative operation that user makes for second message prompt, execute the overlay area tune of crop box
The whole step in picture region to be cut.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811520905.6A CN109785402A (en) | 2018-12-12 | 2018-12-12 | A kind of H5 picture method of cutting out |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811520905.6A CN109785402A (en) | 2018-12-12 | 2018-12-12 | A kind of H5 picture method of cutting out |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109785402A true CN109785402A (en) | 2019-05-21 |
Family
ID=66495818
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811520905.6A Pending CN109785402A (en) | 2018-12-12 | 2018-12-12 | A kind of H5 picture method of cutting out |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109785402A (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104679570A (en) * | 2015-03-24 | 2015-06-03 | 新余兴邦信息产业有限公司 | Image loading display method, equipment and system |
| CN104881888A (en) * | 2015-06-17 | 2015-09-02 | 北京金山安全软件有限公司 | Picture clipping method and device |
| CN105335925A (en) * | 2014-07-30 | 2016-02-17 | 北京畅游天下网络技术有限公司 | Picture clipping method and browser device |
-
2018
- 2018-12-12 CN CN201811520905.6A patent/CN109785402A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105335925A (en) * | 2014-07-30 | 2016-02-17 | 北京畅游天下网络技术有限公司 | Picture clipping method and browser device |
| CN104679570A (en) * | 2015-03-24 | 2015-06-03 | 新余兴邦信息产业有限公司 | Image loading display method, equipment and system |
| CN104881888A (en) * | 2015-06-17 | 2015-09-02 | 北京金山安全软件有限公司 | Picture clipping method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Gullieuszik et al. | OmegaWINGS: OmegaCAM-VST observations of WINGS galaxy clusters | |
| US10579594B2 (en) | Image sharing method and apparatus, and terminal device | |
| Gratadour et al. | Polarimetric imaging of NGC 1068 at high angular resolution in the near infrared-Direct evidence of an extended nuclear torus | |
| US11321274B2 (en) | Software discovery with variable scan frequency | |
| CN1764283A (en) | Color image processing methods and systems for adjusting color | |
| US9313204B2 (en) | Incrementally changing the availability of a feature | |
| CN103389978A (en) | Method and system for acquiring information through augmented reality technologies | |
| WO2022017016A1 (en) | Differential data broadcasting method, apparatus and device based on broadcasting, and storage medium | |
| Gupta et al. | Competition effect of a new mobile technology on an incumbent technology: An Indian case study | |
| CN109785402A (en) | A kind of H5 picture method of cutting out | |
| Dholakia et al. | Global heterogeneity in the emerging m-commerce landscape | |
| CN106157347A (en) | Resource exchange data processing method, device and system | |
| US9525818B2 (en) | Automatic tuning of images based on metadata | |
| CN112445394A (en) | Screenshot method and device | |
| CN110647705A (en) | Picture synthesis method, device, equipment and storage medium | |
| CN105512917A (en) | Internet cloud advertisement publishing and integrating system and advertisement publishing method | |
| CN110035108B (en) | Information pushing method and system | |
| CN109274115B (en) | MIIF analysis method, device, equipment and medium under control of fixed power and fixed extinction angle | |
| CN108229061A (en) | The processing method and processing device of drawing dynamic generation | |
| Cisco | PA-4E Title Page | |
| Cisco | Service and Support | |
| CN108415981B (en) | Data dimension generation method, device, equipment and computer readable storage medium | |
| CN111784558A (en) | Image processing method and device, electronic equipment and computer storage medium | |
| CN108521448A (en) | Business witnesses method, apparatus, equipment and storage medium | |
| CN116860899B (en) | Updating method of ship inventory chart data |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |