Client-Side Browser Image Scaling via Patch Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
The existing process of uploading digital images to a server is wasteful in terms of time and bandwidth, as full-size images are typically uploaded and then processed on the server, consuming processing power and resources.
Innovation Solution
A high-performance client-side in-browser scaling method that breaks down large images into smaller patches, scales them down progressively, and uploads the smaller versions, reducing memory requirements and allowing real-time progress tracking.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of time
If full-size images are uploaded to the server, then the server can process and provide lower resolution versions, but this consumes excessive bandwidth and time
Solution Approach 1:
The patent divides the large image into multiple smaller patches or tiles before upload. Each patch is independently processed and uploaded separately to the server. This segmentation reduces the bandwidth required for each individual upload operation and allows parallel processing, significantly reducing total upload time and bandwidth consumption while maintaining the ability to reconstruct the full image on the client side.
Solution Approach 2:
The patent performs preliminary downsampling and patching of the image on the client side before upload. By pre-processing the image to create smaller patches at reduced resolution, the system eliminates the need to upload the full-size image, thereby reducing bandwidth consumption and upload time while still allowing the server to work with manageable image data.
2Reliability
If full-size images are uploaded, then complete image data is available on the server, but this consumes excessive server processing power
Solution Approach 1:
The server receives and processes multiple small patches instead of one large image. This segmentation allows the server to process smaller, more manageable image data units in parallel, reducing the processing power required per unit and enabling efficient resource utilization while maintaining complete image data availability through reconstruction of all patches.
Solution Approach 2:
The patent creates simplified copies or representations of the original image data in the form of downsampled patches. These patch copies contain sufficient information for most processing purposes while requiring significantly less server processing power compared to the full-resolution image, yet still preserve the essential visual information needed for reliability.
3Productivity
If images are scaled down on the client side, then upload time and bandwidth are reduced, but this requires additional client-side processing
Solution Approach 1:
The client-side processing is simplified by segmenting the image into regular grid-based patches rather than implementing complex progressive or adaptive compression algorithms. This regular segmentation can be efficiently performed using standard canvas operations and image manipulation APIs, reducing the complexity of client-side processing while achieving significant upload speed improvements through reduced file sizes.
Data Source
Figure 1
Figure 2
Figure 3~4
AI summary
According to a preferred aspect of the instant invention, there is provided a system and method for high-performance client-side in-browser scal ing of digital images. The instant invention processes large digital images in a client-based web browser, pri or to upload to a server. The system provi des a tremendous decrease in time requi red for uploading of digital images for onl i ne use. The instant invention that is carried out on the client device i s therewith decreasing processing ti me and bandwidth.