Method and system for processing picture uploading

Abstract

The invention belongs to the technical field of computers, and particularly relates to a method and system for processing picture uploading, the system comprises a configuration unit, an analysis unit, a duplicate checking unit, a preprocessing unit and a processing unit, through preprocessing of duplicate checking, compression, slicing and the like of pictures, storage space and bandwidth can be saved, consumption of data traffic is reduced, and the processing efficiency is improved. In addition, the user experience is improved, the website performance is optimized, the transmission speed is increased, and the safety and compatibility are improved while the visual quality is kept.

Description

Technical Field

[0001] The present invention belongs to the field of computer technology, and particularly relates to a method and system for processing picture uploads. Background Art

[0002] With the development of modern Internet technology, the dissemination of information is no longer limited to text, and multimedia forms such as pictures and videos have enriched the content. As the times progress, people's life rhythm is also accelerating. When obtaining information on the Internet, it is required that information resources can be presented quickly and save traffic, which puts requirements on the network bandwidth of the resource storage server and the volume of static resources. Information publishers also hope to shorten the upload time of resources such as pictures. However, today's cameras have extremely high pixels, which greatly increases the volume of pictures. At the same time, the sensitive metadata carried by the uploaded pictures (such as shooting location, time, camera model) increases the risk of privacy leakage in network transmission. Therefore, preprocessing of pictures is an urgent need. Summary of the Invention

[0003] Based on the above problems, the present application provides a method and system for processing picture uploads that can perform preprocessing such as picture duplicate checking, compression, and slicing. The technical solution is as follows:

[0004] A method for processing picture uploads includes the following steps: S1. Define the rule parameters for picture processing; S2. Calculate the file hash value, which is the identity identifier of the file; S3. Check for duplicates in the database. Determine whether the same file already exists in the resource library based on the file hash value, and use the obtained file hash value as the unique identity verification request parameter to call the server query interface; if it is a duplicate file, directly return the resource information; if it is not a duplicate file, proceed to the next step; S4. Calculate the width and height of the output picture according to the set parameters; S5. Determine whether it is a long picture based on the set long picture height threshold; if so, calculate the number of slices and divide the slices according to the set standard, and process the slices; if it is not a long picture, process the picture according to the calculated value; S6. Convert the picture or slice uploaded in step S5 into a base64 code and use it as a parameter to pass to the server upload interface to complete the picture upload.

[0005] Preferably, in step S1, the rule parameters for picture processing include the maximum width allowed for the picture, the output quality coefficient, the long picture maximum height standard, the cutting height of each slice for long pictures, and the output picture format.

[0006] Preferably, use the HTML native form <input type="”file”">Select an image file. By listening to the onchange event of the form, a FileList object is returned. This object contains the files selected by the user, and each file is represented by a File object. Create a FileReader object. FileReader is part of the HTML5 File API. In a web application, it allows asynchronous reading of files selected by the user on the client side. Call the readAsArrayBuffer method of this object, passing the File object to be processed as a parameter. This will return an ArrayBuffer object. At this time, the Uint8Array object can be used to read the binary data of the file, and then a hash function algorithm is executed to obtain a hash value of a fixed length. This hash value is unique and is used as the unique identity verification for the image resource.

[0007] Preferably, in step S3, if there are duplicate files, this resource information will be returned in an array type. Each item in the array contains the key value, link, size, dimensions, and format of the image resource. According to the sequence metadata in the key value of the access path, it is sorted and organized for subsequent use.

[0008] Preferably, the slicing process is as follows: Number of whole slices = Math.floor(H / H1), where H is the height of the image and H1 is the cutting height; The number of whole slices is obtained by rounding down: Height of the last slice = H%H1; % is the modulo operation to calculate whether there is a remainder, and thus: Total number of slices = number of whole slices + (remainder?1:0); The output image format can change the format of the original image.

[0009] Preferably, in step S4, a FileReader object is created. Call the readAsDataURL method of the object to generate a Data URL for the File object and assign it to the src property of the Image object. In the onload event callback of the Image object, obtain the width and height of the file; calculate the width and height of the output image proportionally according to the parameters set in the configuration unit. Then, based on the obtained height, determine whether it is a long image. If it is a long image, it will be sliced; if not, it will be directly compressed.

[0010] Preferably, when uploading the image in step S6, a key key value parameter is also required. This parameter is the last layer path to access the resource and is composed of the following form: key = File hash value + '_chunk_' + index + '.' + Image format (png / jpeg...); The default value of index is 1. When uploading image slices, index is an incrementing serial number to ensure continuity and uniqueness. In this way, the serial number metadata is carried when uploading an image or sliced images.

[0011] An image upload processing system, including a configuration unit, a parsing unit, a duplicate checking unit, a preprocessing unit, and a processing unit; The configuration unit is used to define the rule parameters for image processing, including the maximum width allowed for the image, the quality coefficient of the output, the maximum height standard for long images, the cutting height of each slice for long images, and the output image format; The parsing unit is used to read the entire content of the image file and parse it into a unique identity identifier for the file; use the native form <input type="”file”"> Select the image file to obtain the File object of the file; create a FileReader object, call the readAsArrayBuffer method of the object, use the File object to be processed as a parameter to convert it into binary data of the file, and then execute the hash function algorithm to obtain a unique file hash value. This hash value is the identity identifier of the file; The duplicate checking unit is used to determine whether the same file already exists in the resource library. Use the obtained file hash value as the unique identity verification request parameter, call the server query interface to check whether there are duplicate files in the resource storage library; if there are duplicates, directly return the file information; this information will be returned in an array type, and each item in the array contains the key value, link, size, dimensions, format, etc. of the image resource. Sort and organize according to the serial number metadata in the access path key value for subsequent use; The preprocessing unit is used to calculate the width and height of the output image and whether the image needs to be sliced; create a FileReader object, call the readAsDataURL method of the object to generate a Data URL for the file File object and assign it to the src attribute of the Image object to obtain the size and dimensions of the file to be uploaded; calculate the width and height of the output image and whether to upload it in slices according to the parameters of the configuration unit; The processing unit is used to compress the image or image slices and complete the upload of the image resource; according to the calculated output result, use the canvas tag interface provided by the DOM to draw the image to achieve compression and slicing, filter sensitive information, specify the output image format and quality according to the configuration parameters, obtain the file base64 code, and pass it as a parameter to the server upload interface to complete the image upload process.

[0012] Preferably, the maximum width allowed for the picture in the configuration unit controls the width of the output picture. When the picture width is greater than the set value, the width and height of the compressed picture are calculated proportionally according to the size ratio of the original picture. The output quality coefficient controls the quality of the output picture, and the value range is 0-1.

[0013] Preferably, the configuration unit adopts a step-by-step trial method, starting from high quality for compression and gradually reducing the quality to find the minimum volume with hardly perceptible quality loss to the naked eye. The maximum height standard for long pictures is to judge whether the calculated height of the picture is a long picture, and this value can be adjusted according to the picture display scenario.

[0014] Compared with the prior art, the beneficial effects of this application are as follows: 1. Duplicate checking can avoid uploading the same picture repeatedly, save storage space, and reduce the redundancy of the resource library.

[0015] 2. While significantly reducing the file size of the compressed picture, it maintains lossless visual quality, has a faster upload speed, and improves the work efficiency of the publisher.

[0016] 3. Improve the web page loading speed, optimize the website performance, reduce the data transmission volume, lower the bandwidth consumption, save the traffic cost, and enhance the user experience.

[0017] 4. Metadata in the picture (such as shooting location, date, camera model, etc.) can be removed during the compression process, reducing the risk of privacy leakage and improving security.

[0018] 5. The compressed picture can be set to a more widely compatible picture format (such as jpeg / png).

[0019] 6. After the long picture is sliced, the picture can be quickly displayed, greatly reducing the performance consumption and compatibility of the long picture rendering and display on the terminal. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 is the flow chart of this application;

[0021] Figure 2 is the structure diagram of this application. DETAILED DESCRIPTION OF THE INVENTION

[0022] Through Figure 1 - Figure 2 detailed description of this application, a method for processing picture uploads includes the following: S1. Define the rule parameters for picture processing; Define the rule parameters for picture processing, including the maximum width allowed for the picture, the output quality coefficient, the maximum height standard for long pictures, the cutting height for each slice of the long picture, and the output picture format.

[0023] S2. Calculate the file hash value, which is the identity identifier of the file; Use the native HTML form <input type="”file”"> Select an image file. By listening to the form's onchange event, return a FileList object that contains the files selected by the user. Each file is represented by a File object; Create a FileReader object. FileReader is an HTML5 File API. In a web application, it allows asynchronous reading of the files selected by the user on the client side. Call the readAsArrayBuffer method of this object, using the File object to be processed as a parameter, which will return an ArrayBuffer object. At this time, the Uint8Array object can be used to read the binary data of the file, and then execute the hash function algorithm to obtain a hash value of a fixed length. This hash value is unique and is used as the unique identity verification of the image resource.

[0024] S3. Check for duplicates in the repository. Determine whether the same file already exists in the resource repository based on the file's hash value. Use the obtained file hash value as the unique identity verification request parameter and call the server query interface; if it is a duplicate file, directly return the resource information; if it is not a duplicate file, proceed to the next step.

[0025] If it is a duplicate file, this resource information will be returned in an array type. Each item in the array contains the key value, link, size, dimensions, and format of the image resource. Sort and organize according to the sequence metadata in the access path key value for subsequent use.

[0026] S4. Calculate the width and height of the output image according to the set parameters; S5. Determine whether it is a long image according to the set long image height threshold; if so, calculate the number of slices and split the slices according to the set standard, and process the slices; if it is not a long image, process the image according to the calculated value.

[0027] In step S4, create a FileReader object, call the readAsDataURL method of the object to generate a Data URL for the file File object and assign it to the src attribute of the Image object. In the onload event callback of the Image object, obtain the width and height of the file; calculate the width and height of the output image proportionally according to the parameters set in the configuration unit, and then determine whether it is a long image based on the obtained height. If it is a long image, perform slicing processing; if it is not a long image, directly perform compression processing.

[0028] The slicing process is as follows: The total number of slices = Math.floor(H / H1), H is the height of the picture, and H1 is the cutting height; Round down to get the number of whole pieces: The height of the last piece = H % H1; % is the modulo operation, which calculates whether there is a remainder, thus obtaining: The total number of pieces = the number of whole pieces + (remainder? 1 : 0); The output picture format can change the format of the original picture.

[0029] S6. Convert the picture or slice uploaded in step S5 into a base64 code and pass it as a parameter to the server upload interface to complete the upload of the picture.

[0030] When uploading the picture in step S6, a key key value parameter is also required. This parameter is the last layer path to access the resource and is composed of the following form: key = file hash value + '_chunk_' + index + '.' + picture format (png / jpeg...); The index defaults to 1. When uploading pictures in slices, the index is an incrementing serial number to ensure continuity and uniqueness. In this way, the uploaded picture or sliced picture carries the serial number metadata.

[0031] A picture upload processing system includes a configuration unit, a parsing unit, a duplicate checking unit, a preprocessing unit, and a processing unit; The configuration unit is used to define the rule parameters for picture processing, including the maximum width allowed for the picture, the output quality coefficient, the maximum height standard for long pictures, the cutting height for each slice of long pictures, and the output picture format.

[0032] The parsing unit is used to read the entire content of the picture file and parse it into a unique identity identifier for the file. Use the native form <input type="”file”"> Select the picture file to obtain the File object of the file. Create a FileReader object, call the readAsArrayBuffer method of the object, use the File object to be processed as a parameter to convert it into the binary data of the file, and then execute the hash function algorithm to obtain a unique file hash value. This hash value is the identity identifier of the file.

[0033] The duplicate checking unit is used to determine whether the same file already exists in the resource library. Use the obtained file hash value as the unique identity verification request parameter, call the server query interface to check whether there are duplicate files in the resource storage library. If there are duplicates, directly return the file information. This information will be returned in an array type. Each item in the array contains the key value, link, size, dimensions, format, etc. of the picture resource. Sort and organize according to the serial number metadata in the access path key value for subsequent use.

[0034] The preprocessing unit is used to calculate the width and height of the output picture and whether the picture needs to be sliced. Create a FileReader object, call the readAsDataURL method of the object to generate a Data URL from the file File object and assign it to the src attribute of the Image object, and obtain the size and dimensions of the file to be uploaded. Calculate the width and height of the output picture and whether to upload it in slices according to the parameters of the configuration unit.

[0035] The processing unit is used to compress the picture or slice the picture and complete the upload of the picture resource. According to the calculated output result, use the canvas tag interface provided by the DOM to draw the picture to achieve compression and slicing, and filter sensitive information. According to the configuration parameters, specify the output picture format and quality, obtain the file base64 code, and pass it as a parameter to the server upload interface to complete the picture upload process.

[0036] Among the parameters in the configuration unit, the maximum allowed width of the picture controls the width of the output picture. When the picture width is greater than the set value, the width and height of the compressed picture are calculated proportionally according to the size ratio of the original picture. The output quality coefficient controls the quality of the output picture, and the value range is 0 - 1. The setting of this value can balance the picture volume and visual quality. A high-quality picture means that the picture contains more detail and color information, and the picture file needs to occupy more space, that is, the volume increases. Compressing the volume will inevitably result in a loss of quality. The step-by-step trial method can be adopted. Start compressing from a high quality (such as 0.95), and gradually reduce the quality (5% each time) to find the minimum volume with hardly noticeable quality loss to the naked eye. When not set, the default is the general balance point 0.85. The maximum height standard for long pictures is to judge whether the calculated height of the picture is a long picture. This value can be set according to the picture display scenario. For example, for the iPhone 6 resolution of 750 * 1334, 1.5 times the height is 2000, and 2000 can be used as the standard value for long pictures. If it is a long picture, the picture will be sliced. The cutting height of each slice of the long picture can calculate how many parts the picture should be cut into. The setting of the cutting height is preferably within the display height range of one screen of the terminal (such as 1000). Usually, within the visible range of one screen, the rendering efficiency can be improved and the user experience can be enhanced. The calculation of the number of slices can use the following formula: The number of whole slices = Math.floor(H / H1), where H is the picture height and H1 is the cutting height; use the Math object method provided by JavaScript to get the number of whole slices by rounding down.

[0037] Get the number of whole slices by rounding down: The height of the last slice = H % H1; By using the modulo operation % in JavaScript to calculate whether there is a remainder, it can be concluded that: Total number of pieces = number of whole pieces + (remainder? 1 : 0).

[0038] The output image format can change the format of the original image. Modifying this parameter can improve the compatibility of the image on the terminal (for example, webp can be converted to jpeg and png formats with wide compatibility). Moreover, jpeg can achieve better image quality retention at a smaller file size.

[0039] Among them, the parsing unit will ultimately generate the identity hash value of the file. Use the native form of HTML (HyperText Markup Language) <input type="”file”"> to select an image file. By listening to the onchange event of the form, a FileList object is returned. This object contains the files selected by the user. Each file is represented by a File object. Create a FileReader object. FileReader is an HTML5 File API. In a web application, it allows asynchronous reading of the files selected by the user on the client side. Call the readAsArrayBuffer method of this object, taking the File object to be processed as a parameter, and an ArrayBuffer object will be returned. At this time, the Uint8Array object can be used to read the binary data of the file, and then the hash function algorithm (such as MD5) is executed to obtain a hash value of a fixed length. This hash value is unique. Different files (even if they have the same file name) will get different hash values. Files with the same hash value must have exactly the same content. Therefore, this value is used as the verification of the unique identity of the image resource.

[0040] Among them, the duplicate checking unit can avoid repeated uploading of the same image, save storage space, and reduce redundancy in the resource library. Take the obtained file hash value as a parameter and call the server query interface to check whether there are duplicate files in the resource repository. If there are duplicates, the file information will be directly returned, including the link, size, dimensions, format, etc. of the image resource. This saves the time for image processing and uploading and greatly improves the efficiency. If not, it will enter the next unit.

[0041] The preprocessing unit is used to calculate the width and height of the output image and determine whether the image needs to be sliced. It creates a FileReader object, calls the readAsDataURL method of the object to generate a Data URL from the File object and assigns it to the src property of the Image object. In the onload event callback of the Image object, the width and height of the file are obtained. The width and height of the output image are calculated proportionally according to the parameters set by the configuration unit, and then it is determined whether it is a long image by getting the height. If it is a long image, it will be sliced; if not, it will be directly compressed.

[0042] The processing unit is used to compress the image or slice the image and complete the upload of the image resource. According to the calculated output result, if it is not a long image, it calls the document object, creates a canvas DOM object, executes the drawImage interface of the object, and redraws the image according to the calculated width, height and other parameters to achieve compression and slicing, and filters sensitive information. Then it executes the toDataURL interface of the object again, specifies the output image format and quality according to the configuration parameters, obtains the base64 encoding of the file, and passes it as a parameter to the server upload interface to complete the image upload process. If it is a long image, according to the calculated number of whole slices, then loop through the for function, and the range of the loop variable i is: i >= 0 && i <= the number of whole slices. The y-axis coordinate of each slice of the image drawn by the canvas object is i * the cutting height. When drawing the last slice, if the calculated height of the last slice is 0, then break out of the loop; if not, the height of the image drawn is the calculated height of the last slice. Obtain the base64 encoding of each slice, generate an upload request, and each request forms an array, which is used as the parameter of Promise.all, and the response result is processed in its.then.

[0043] When uploading the image, a key parameter is also required. This parameter is the last layer path to access the resource and is composed of the following form: key = file hash value + '_chunk_' + index + '.' + image format (png / jpeg...); The index defaults to 1. When uploading sliced images, the index is an incrementing serial number to ensure continuity and uniqueness. In this way, the uploaded image or sliced images carry serial number metadata. The image order problem is handled during duplicate checking or multi-slice upload.

[0044] Through this device, not only can storage space and bandwidth be saved, but also the user experience can be improved, the website performance can be optimized, the transmission speed can be accelerated, and security and compatibility can be enhanced while maintaining visual quality.

[0045] The foregoing has shown and described the basic principles, main features and advantages of the present application. Those skilled in the art should understand that the present application is not limited by the above embodiments, and the above embodiments and the descriptions in the specification are only preferred examples of the present application, which are not used to limit the present application. Without departing from the spirit and scope of the present application, the present application will have various changes and improvements, and these changes and improvements all fall within the scope of the present application claimed. The scope of protection claimed by the present application is defined by the appended claims and their equivalents.

Claims

1. A method for processing picture uploads, characterized in that, It includes the following contents: S1. Define the rule parameters for image processing; S2. Calculate the file hash value, which is the identity identifier of the file; S3. Check for duplicates in the database. Determine whether the same file already exists in the resource library based on the file hash value. Use the obtained file hash value as the unique identity verification request parameter and call the server query interface. If it is a duplicate file, directly return the resource information. If it is not a duplicate file, proceed to the next step; S4. Calculate the width and height of the output image according to the set parameters; S5. Determine whether it is a long image based on the set long image height threshold. If so, calculate the number of slices and split the slices according to the set standard, and process the slices. If it is not a long image, perform image processing according to the calculated values; S6. Convert the image or slice uploaded in step S5 into a base64 code and pass it as a parameter to the server upload interface to complete the upload of the image.

2. The method for processing picture upload according to claim 1, wherein In step S1, the rule parameters for image processing are defined, including the maximum width allowed for the image, the quality coefficient of the output, the maximum height standard for long images, the cutting height of each slice for long images, and the output image format.

3. A method for processing picture upload according to claim 1, characterized in that, Using the native HTML form <input type="”file”"> Select an image file and return a FileList object by listening to the form's onchange event. This object contains the files selected by the user, and each file is represented by a File object; Create a FileReader object. FileReader is an HTML5 File API. In a web application, it allows asynchronous reading of files selected by the user on the client side. Call the readAsArrayBuffer method of this object, using the File object to be processed as a parameter, which will return an ArrayBuffer object. At this time, the Uint8Array object can be called to read the binary data of the file, and then execute the hash function algorithm to obtain a hash value of a fixed length. This hash value is unique and is used as the unique identity verification of the image resource.

4. A method for processing picture upload according to claim 1, characterized in that, In step S3, if it is a duplicate file, this resource information will be returned in array type. Each item in the array contains the key value, link, size, dimensions, and format of the image resource. Sort and organize according to the sequence metadata in the access path key value for subsequent use.

5. A method for processing picture upload according to claim 1, characterized in that, The slice processing is as follows: The number of whole slices = Math.floor(H / H1), where H is the image height and H1 is the cutting height; Get the number of whole slices by rounding down: The height of the last slice = H%H1; % is the modulo operation to calculate whether there is a remainder, and thus: The total number of slices = the number of whole slices + (remainder?1:0); The output image format can change the format of the original image.

6. A method for processing picture upload according to claim 1, characterized in that, In step S4, create a FileReader object, call the readAsDataURL method of the object to generate a Data URL for the File object and assign it to the src attribute of the Image object. In the onload event callback of the Image object, obtain the width and height of the file; calculate the width and height of the output image proportionally according to the parameters set in the configuration unit, and then determine whether it is a long image based on the obtained height. If it is a long image, perform slicing processing. If it is not a long image, directly perform compression processing.

7. A method for processing picture upload according to claim 1, characterized in that, When uploading the picture in step S6, a key key value parameter is also required. This parameter is the last layer of the path to access the resource and is composed of the following form: key = file hash value + '_chunk_' + index + '.' + picture format (png / jpeg...); The index defaults to 1. When uploading pictures in slices, the index is an incrementing serial number to ensure continuity and uniqueness. In this way, the uploaded pictures or sliced pictures carry the serial number metadata.

8. A picture upload processing system, which adopts the method for processing picture upload as described in any one of claims 1-7, characterized in that, Including a configuration unit, a parsing unit, a duplicate checking unit, a preprocessing unit, and a processing unit; The configuration unit is used to define the rule parameters for picture processing, including the maximum width allowed for the picture, the output quality coefficient, the maximum height standard for long pictures, the cutting height of each slice of long pictures, and the output picture format; The parsing unit is used to read the entire content of the picture file and parse it into a unique identity identifier for the file; select the picture file using the native form <input type="file"> to obtain the File object of the file; create a FileReader object and call the readAsArrayBuffer method of the object, using the File object to be processed as a parameter to convert it into the binary data of the file, and then execute the hash function algorithm to obtain a unique file hash value. This hash value is the identity identifier of the file; The duplicate checking unit is used to determine whether the same file already exists in the resource library. Use the obtained file hash value as the unique identity verification request parameter and call the server query interface to check whether there are duplicate files in the resource storage library; if there are duplicates, directly return the file information; this information will be returned in an array type, and each item in the array contains the key value, link, size, dimensions, and format of the picture resource. Sort and organize according to the serial number metadata in the access path key value for subsequent use; The preprocessing unit is used to calculate the width and height of the output picture and whether the picture needs to be sliced; create a FileReader object and call the readAsDataURL method of the object to generate a Data URL for the file File object and assign it to the src attribute of the Image object to obtain the size and dimensions of the file to be uploaded; calculate the width and height of the output picture and whether to upload in slices according to the parameters of the configuration unit in proportion; The processing unit is used to compress the picture or picture slices and complete the upload of the picture resource; according to the calculated output result, use the canvas tag interface provided by the DOM to draw the picture to achieve compression and slicing, filter sensitive information, specify the output picture format and quality according to the configuration parameters, obtain the file base64 code, and pass it as a parameter to the server upload interface to complete the picture upload process.

9. A picture upload processing system according to claim 8, characterized in that The maximum width allowed for the picture in the configuration unit controls the width of the output picture. When the picture width is greater than the set value, calculate the width and height of the compressed picture in proportion according to the size ratio of the original picture. The output quality coefficient controls the quality of the output picture, and the value range is 0-1.

10. A picture upload processing system according to claim 8, characterized in that, The hive unit adopts a step-by-step trial method, starting from high quality for compression and gradually reducing the quality to find the minimum volume with imperceptible quality loss to the naked eye. The maximum height standard for long pictures is to determine whether the height of the picture after calculation is that of a long picture, and this value can be adjusted according to the picture display scenario.

Images