Tool for automatically cutting and converting webp picture

Abstract

The invention belongs to the technical field of picture tools, and discloses a picture tool capable of automatically cutting and converting webp, which comprises two parts: a picture component description document platform and a picture component library, the picture component library comprises a picture link imgUrl, and a two-fold picture and a three-fold picture srcSet are distinguished; the method comprises the following steps of: uniformly defaulting a base map defaultUrl; and the image is automatically converted into formatWebp in a Webp image format. The invention provides a set of unified picture cutting rule and webp format solution, unified closing is performed for picture use of a plurality of items, the same set of dis cutting rule is used, all pictures are received at one place, picture management is facilitated, a double picture or a triple picture can be automatically selected according to user equipment, the size of the picture is reduced, and user experience is improved. According to the method, the bandwidth of a user is greatly reduced, the experience of the user is improved, meanwhile, the tool carries out closing-in on subsequent picture upgrading, and when the format of the subsequent picture is upgraded, it can be avoided that all items upgrade the picture separately, and only upgrading is carried out in a picture assembly.

Description

Technical Field

[0001] The present invention belongs to the technical field of picture tools, and specifically is a picture tool for automatic cropping and conversion to webp. Background Art

[0002] With the continuous expansion and development of front-end projects, and in order to improve user experience, we found that the actual size of many business pictures is very large, while the size of the pictures required to be displayed on the page is very small. The consequence is that users visit our pages, wasting a lot of bandwidth, and the display speed of pictures needs to be improved. On this basis, we also found that the business pictures are uneven. Some pictures are cropped in the back end, and some are not cropped. In addition, many pictures are in JPG format, and the mainstream webp format is not used. Therefore, in order to reduce the bandwidth waste of pictures when users use App and improve user experience, the company has higher and higher requirements for the pictures of the project. For projects that use a large number of pictures, certain optimizations should be made in the pictures to cope with the current requirements for improving user experience and reducing bandwidth waste, including picture size, picture format and picture cropping rules. For all projects that use 3x pictures, pictures should also be adapted according to user devices, and appropriate 2x or 3x pictures should be selected to meet the user's requirements for picture clarity. All pictures use the company's unified default background map. In terms of picture format, the current mainstream webp format needs to be used, and it is compatible with all RN front-end projects. When the picture format is upgraded later, it can also be upgraded with one click.

[0003] The existing technical solution is to use Auto-rn-image. Auto-rn-image is an image component used in RN projects. It provides unified rules for dis cropping and conversion of image format to webp by default, and uses the default base map to provide an interface to the outside world. Users only need to pass the image URL and cropping size into the component to automatically crop and convert to webp format. It also automatically selects the appropriate magnification image based on the passed in 2x and 3x images according to the user's device. However, it has the following disadvantages: the image component is currently only supported for use in RN projects and does not currently support web development; currently, for image cropping, some cdn images are not supported, and only some cdn images are supported for cropping and webp conversion, so it needs to be improved. Summary of the invention

[0004] The purpose of the present invention is to provide a tool for automatically cropping and converting pictures to webp, so as to solve the problems raised in the above-mentioned background technology.

[0005] In order to achieve the above-mentioned purpose, the present invention provides the following technical scheme: an image tool for automatically cropping and converting to webp, comprising two parts: an image component description document platform and an image component library, wherein the image component library comprises an image link imgUr l, a srcSet for distinguishing between 2x images and 3x images; a unified default background image defaultUr l; automatic conversion to webp image format formatWebp; unified cropping rules cropS i ze according to custom cropping size; a callback onLoadComp l ete(ur l) for successful image loading, which returns a successful image ur l and a callback onLoadError(err(type, code, message) for failed image loading,

[0006] The specific steps are as follows:

[0007] Step 1: Download the image component toolkit from npm:

[0008] npminstal l@bdpweb / auto-rn-image--save-dev;

[0009] Step 2: Import the image component into the project:

[0010] import{AutoRnImage}from"@bdpweb / auto-rn-image";

[0011] Step 3: Use component example:

[0012] <AutoRnImage

[0013] style={{backgroundColor:'blue'}}

[0014] imgUrl = {this.state.bgImage}

[0015] cropSize = {'160x90_'}

[0016] transparent={true}

[0017] resizeMode={'cover'}

[0018] onLoadComplete={(type,code,message)=>{}}

[0019] onLoadError={(url)=>{}}

[0020] / >.

[0021] As a preferred technical solution of the present invention, the imgUrl is a lightweight and efficient image hosting program developed by PHP and SQLite 3. It has a concise design and provides a series of practical functions.

[0022] As a preferred technical solution of the present invention, the srcSet is a A small library for the srcset attribute of the tag, which allows developers to convert a list of images of various sizes and resolutions into a format that can be understood by the browser, automatically selecting the image that is most suitable for the current device display.

[0023] As a preferred technical solution of the present invention, the webp is a picture file format that provides both lossy compression and lossless compression (reversible compression), and has two modes: static and dynamic. The dynamic webp (Animated WebP) supports lossy and lossless compression, ICC color configuration, XMP annotation data, and Alpha transparent channel.

[0024] As a preferred technical solution of the present invention, the URL, i.e. the accessed link, is a uniform resource locator, which identifies a resource (which can be a local computer or Internet resource, commonly used to identify Internet resources) and specifies a method for operating it or obtaining the resource.

[0025] As a preferred technical solution of the present invention, the Image described in step 1, step 2 and step 3 refers to an image folder, which is a React component for displaying various types of images, including network images, static resources, temporary local images, and images on the local disk (such as photo albums).

[0026] As a preferred technical solution of the present invention, the npm described in step 1 is a package management tool for Node.js, which is used to install various Node.js extensions. Its full name is Node Package Manager, i.e., node package manager, which consists of three independent parts: website, registry and command line tool (CLI). The website is the main way for developers to find packages, set parameters and manage npm usage experience. The registry is a huge database that stores information about each package. The CLI runs through the command line or terminal.

[0027] As a preferred technical solution of the present invention, the picture component description document platform provides a detailed description of the picture component, including its application scenarios, function introduction, operation steps, etc.

[0028] As a preferred technical solution of the present invention, the callback onLoadError of the image loading failure includes returning the failure type, code and image error message.

[0029] The beneficial effects of the present invention are as follows:

[0030] The present invention provides a set of unified image cropping rules and webp format solutions, which makes a unified interface for the use of images in multiple projects. Using the same set of dis cropping rules, all images are collected in one place, which is convenient for image management. In addition, 2x or 3x images can be automatically selected according to the user's device, and the reduced image size greatly reduces the user's bandwidth and improves the user experience. At the same time, this tool also closes the subsequent image upgrades. When the image format is upgraded later, it can avoid upgrading the images separately for each project, and only the image component needs to be upgraded. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 It is a flow chart of the present invention. DETAILED DESCRIPTION

[0032] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0033] like Figure 1 As shown, an embodiment of the present invention provides an automatic cropping and webp conversion image tool, including two parts: an image component description document platform and an image component library, wherein the image component library includes an image link imgUr l, a distinction between a 2x image and a 3x image srcSet; a unified default base image defaultUr l; automatic conversion to webp image format formatWebp; unified cropping rules cropSi ze according to a custom cropping size; a callback onLoadComp l ete(url) for successful image loading, which returns a successful image ur l and a callback onLoadError(err(type, code, message) for failed image loading,

[0034] The specific steps are as follows:

[0035] Step 1: Download the image component toolkit from npm:

[0036] npminstal l@bdpweb / auto-rn-image--save-dev;

[0037] Step 2: Import the image component into the project:

[0038] import{AutoRnImage}from"@bdpweb / auto-rn-image";

[0039] Step 3: Use component example:

[0040] <AutoRnImage

[0041] style={{backgroundColor:'blue'}}

[0042] imgUrl = {this.state.bgImage}

[0043] cropSize = {'160x90_'}

[0044] transparent={true}

[0045] resizeMode={'cover'}

[0046] onLoadComplete={(type,code,message)=>{}}

[0047] onLoadError={(url)=>{}}

[0048] / >.

[0049] The automatic cropping and webp conversion image tool provided by the present invention can unify the cropping rules of all business images and front-end static images; the cropped images are put into a unified CDN management, and all images are finally received in one place; all images can be automatically converted into webp format when supported by the client; a unified default image is used, and each image does not need to be set separately. Figure 1 Supports custom image styles; set 2x or 3x images as needed.

[0050] Among them, imgUrl is a lightweight and efficient image hosting program developed with PHP and SQLite 3. It has a concise design and provides a series of practical functions.

[0051] imgUrl is built based on the PHP framework Codelgniter, with good scalability and performance. It uses the PDO_SQLi te database interface to make installation and operation extremely simple, without the need for complex database configuration. It supports drag-and-drop upload, multiple-image upload, Ctrl+V paste upload, and URL upload; supports image cropping and automatic thumbnail generation; limits the number of uploads by visitors; image compression / batch compression, image pornography detection / batch pornography detection; API support; online updates and external storage and other major functions. In addition, the project integrates some mature components such as LayUI (front-end framework) and Parsedown (Markdown parser) to ensure a smooth user experience.

[0052] Among them, srcSet is a A small library for the srcset attribute of the tag, which allows developers to convert a list of images of various sizes and resolutions into a format that can be understood by the browser, automatically selecting the image that is most suitable for the current device display.

[0053] By using srcset, you can ensure that both high-resolution desktop computers and low-power mobile devices can load the most appropriate images, optimize loading speed, and save bandwidth. It can parse and serialize QHTML. The srcset attribute of the tag facilitates the management and optimization of image resources. It is concise and easy to use: the simple APl design makes it very easy to understand and integrate into the existing code base; flexibility: supports three descriptors of width, height and density, suitable for various scenarios; compatibility: follows the srcset syntax of the W3C specification and is compatible with most modern browsers; strict mode: the optional strict mode ensures the correctness and consistency of the data.

[0054] Among them, webp is an image file format that provides both lossy compression and lossless compression (reversible compression). It has two modes: static and dynamic. Dynamic webp (Animated WebP) supports lossy and lossless compression, ICC color configuration, XMP interpretation data, and Alpha transparent channel.

[0055] The maximum number of pixels supported by webp is 16383x16383. Lossy webp only supports 8-bit YUV4:2:0 format, while lossless (reversible) webp supports VP8L encoding and 8-bit ARGB color space. Both lossy and lossless compression support Alpha transparency channels, ICC color profiles, and XMP annotation data.

[0056] Among them, url is the link to be visited, which is a uniform resource locator, which identifies a resource (which can be a local computer resource or an Internet resource, and is commonly used to identify Internet resources) and specifies the method for operating it or obtaining the resource.

[0057] URL is a concise representation of the location and access method of resources that can be obtained from the Internet. It is the address of standard resources on the Internet. Every file on the Internet has a unique URL, which contains information indicating the location of the file and how the browser should handle it.

[0058] Among them, Image in step 1, step 2 and step 3 refers to an image folder, which is a React component used to display various types of images, including network images, static resources, temporary local images, and images on the local disk (such as albums).

[0059] Image is an extreme machine disk file that depicts an image. Its file format is diverse, and usually includes image files used in the computer, including static pictures and animation files, which can be deleted. There are many types of image files. The image file format commonly used in HTML files is mainly JPEG; animation file refers to an image sequence composed of several interrelated frames of still images. These still images are broadcast continuously to form a group of animations, which are usually used to complete simple dynamic process demonstrations.

[0060] Among them, npm in step 1 is the package management tool of Node.js, which is used to install various Node.js extensions. Its full name is Node Package Manager, which consists of three independent parts: website, registry and command line tool (CLI). The website is the main way for developers to find packages, set parameters and manage the npm usage experience. The registry is a huge database that saves the information of each package. The CLI runs through the command line or terminal.

[0061] npm is the default package manager for the JavaScript runtime environment Node.js. npm provides a public library for developers. You only need to build the Node.js environment to enjoy the convenience brought by npm.

[0062] Among them, the image component description document platform provides a detailed description of the image component, including its application scenarios, function introduction, operation steps, etc.

[0063] This information can help users understand how to use image components on specific platforms, such as adding, uploading, setting sizes, adding web links, and other operations. In addition, it also explains the image formats and file size limitations supported by image components, as well as how to delete image components and set styles. This content is helpful for understanding and using image components.

[0064] The callback onLoadError of image loading failure includes returning the failure type, code and image error message.

[0065] By returning detailed information about the failure type, it is helpful to find the specific cause of the failure, make adjustments to it, and improve the convenience of using the image tool.

[0066] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device.

[0067] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A tool for automatically cropping and converting pictures to webp, characterized in that: It includes two parts: the image component description document platform and the image component library. The image component library includes the image link imgUrl, the distinction between 2x and 3x images srcSet; the unified default background map defaultUrl; automatic conversion to webp image format formatWebp; unified cropping rule cropSize according to custom cropping size; callback onLoadComplete(url) when the image is loaded successfully, returning the successful image url and callback onLoadError(err(type, code, message) when the image fails to load, The specific steps are as follows: Step 1: Download the image component toolkit from npm: npmins tall@bdpweb / auto-rn-image--save-dev; Step 2: Import the image component into the project: import{AutoRnImage}from"@bdpweb / auto-rn-image"; Step 3: Use component example: <AutoRnImage s style={{backgroundColor:'blue'}} imgUrl = {this.state.bgImage} cropSize = {'160x90_'} transparent={true} resizeMode = {'cover'} onLoadComplete={(type,code,message)=>{}} onLoadError={(url)=>{}} / >。 2. The image automatic cropping and webp conversion tool according to claim 1, characterized in that: The imgUrl is a lightweight and efficient image hosting program developed with PHP and SQLite 3. It has a concise design and provides a series of practical functions.

3. The image automatic cropping and conversion to webp tool according to claim 1, characterized in that: The srcSet is a process for processing and generating A small library for the srcset attribute of the tag, which allows developers to convert a list of images of various sizes and resolutions into a format that can be understood by the browser, automatically selecting the image that is most suitable for the current device display.

4. The image automatic cropping and webp conversion tool according to claim 1, characterized in that: The webp is an image file format that provides both lossy compression and lossless compression (reversible compression). It has two modes: static and dynamic. The dynamic webp (Animated WebP) supports lossy and lossless compression, ICC color configuration, XMP annotation data, and Alpha transparent channel.

5. The image tool for automatic cropping and conversion to webp according to claim 1, characterized in that: The URL is the link to be visited, which is a uniform resource locator, which identifies a resource (which can be a local computer resource or an Internet resource, and is commonly used to identify Internet resources) and specifies the method for operating it or obtaining the resource.

6. The image automatic cropping and webp conversion tool according to claim 1, characterized in that: The Image mentioned in step 1, step 2 and step 3 refers to an image folder, which is a React component used to display various types of images, including network images, static resources, temporary local images, and images on the local disk (such as photo albums).

7. The image automatic cropping and webp conversion tool according to claim 1, characterized in that: The npm mentioned in step 1 is a package management tool for Node.js, which is used to install various Node.js extensions. Its full name is Node Package Manager, which consists of three independent parts: website, registry and command line tool (CLI). The website is the main way for developers to find packages, set parameters and manage the npm usage experience. The registry is a huge database that stores information about each package. The CLI runs through the command line or terminal.

8. The image automatic cropping and webp conversion tool according to claim 1, characterized in that: The image component description document platform provides a detailed description of the image component, including its application scenarios, function introduction, operation steps, etc.

9. The image automatic cropping and conversion to webp tool according to claim 1, characterized in that: The callback onLoadError of the image loading failure includes returning the failure type, code and image error message.

Images