Implementing progressive image downloads
The article describes the possibilities of own implementation of progressive uploading images on the site without using Flash. Interactive drawing is implemented through the element: canvas from HTML5. The algorithmic basis of the process is the discrete wavelet transform.
Loading the browser in the standard jpg format, we see the drawing from top to bottom, as data is received. This is the simplest example of progressive download. I do not know for what reason the version with drawing from the center in a spiral that is relevant for viewing most photos was ignored. The idea of ​​progressive download was further developed in the standard progressive jpg . On the Internet, it is quite rare, although this format is supported by all major browsers for a long time. Drawing occurs frame by frame with a pronounced mosaic structure - features of the jpg standard. We will try to go further and pay attention to the format jpeg2000. Unlike jpg , the wavelet transform is used instead of the cosine transform in jpeg2000 , which gives a greater degree of compression with the same error indices and less blockiness of artifacts. Wikipedia claims that it supports progressive downloads from “birth,” but the author has never seen this in action. Moreover, all the examples of jpeg2000 , which could be found on the Internet, could not be opened by browsers (Chrom 18, Explorer 9, Firefox 11). The site fileinfo.com, contains information that under Windows browsers and does not open the jp2 format. Considering that the format, although good, is still not well supported, and it may be burdened with hidden patents, we will try to implement our version of the progressive download based on the wavelet transform.
')
We take an image where the height and width are equal to degree 2 (the limitation of the algorithm, how to bypass it will not be considered). In our case, this is a black and white map with a width and height of 1024 pixels. We write the program of multi-level two-dimensional wavelet transform. Code attached: link . The Haar wavelet is used, although in the code you can choose any orthogonal wavelet filter and even dyadic wavelets, which will definitely be written when there is a good example of application. Who needs to deal with the algorithm or with the wavelets themselves, I recommend the book by S. Mulla Wavelets in signal processing . Run the program, specify the image. We obtain txt files, where wavelet coefficients with the same levels (in the example, 5 levels) and types of detailing are stored, quantized (needed for volume reduction). We load them on the server. We create a html page with the canvas object and in the page load event we write a script, step by step loading the previously created wavelet coefficient files. Each time the file is uploaded, the image recovery function (inverse wavelet transform) will be called. We look what happened: link_1 (2 Mb) . Immediately I confess that the picture is loaded 10 times slower than the original. The point is that the quantized coefficients were saved to files as text and take up an order of magnitude more space. It was necessary to still apply the Huffman code or full compression of the coefficients. Browser Explorer does not want to display changes to canvas while the script is running. In Chrome, things are a little better, if we insert, say, alerts, then the stages will be visible ( link_2 (2 Mb) ). If the code will be executed "monotonously" then the behavior is similar to Explorer. Pleases with the predictability of the execution of Firefox code, and I advise you to watch link 1.
It's safe to say that it is possible to implement progressive loading with the help of HTML5, that modern browsers tolerate time-consuming mathematical calculations (with a modern computer). The question of the timely visualization of changes in the canvas and the relevance of the topic of progressive loading in general remains open. As noted earlier, not so often can be seen on the progressive jpg site, and browsers do not have jp2 support at all.
Loading the browser in the standard jpg format, we see the drawing from top to bottom, as data is received. This is the simplest example of progressive download. I do not know for what reason the version with drawing from the center in a spiral that is relevant for viewing most photos was ignored. The idea of ​​progressive download was further developed in the standard progressive jpg . On the Internet, it is quite rare, although this format is supported by all major browsers for a long time. Drawing occurs frame by frame with a pronounced mosaic structure - features of the jpg standard. We will try to go further and pay attention to the format jpeg2000. Unlike jpg , the wavelet transform is used instead of the cosine transform in jpeg2000 , which gives a greater degree of compression with the same error indices and less blockiness of artifacts. Wikipedia claims that it supports progressive downloads from “birth,” but the author has never seen this in action. Moreover, all the examples of jpeg2000 , which could be found on the Internet, could not be opened by browsers (Chrom 18, Explorer 9, Firefox 11). The site fileinfo.com, contains information that under Windows browsers and does not open the jp2 format. Considering that the format, although good, is still not well supported, and it may be burdened with hidden patents, we will try to implement our version of the progressive download based on the wavelet transform.
')
We take an image where the height and width are equal to degree 2 (the limitation of the algorithm, how to bypass it will not be considered). In our case, this is a black and white map with a width and height of 1024 pixels. We write the program of multi-level two-dimensional wavelet transform. Code attached: link . The Haar wavelet is used, although in the code you can choose any orthogonal wavelet filter and even dyadic wavelets, which will definitely be written when there is a good example of application. Who needs to deal with the algorithm or with the wavelets themselves, I recommend the book by S. Mulla Wavelets in signal processing . Run the program, specify the image. We obtain txt files, where wavelet coefficients with the same levels (in the example, 5 levels) and types of detailing are stored, quantized (needed for volume reduction). We load them on the server. We create a html page with the canvas object and in the page load event we write a script, step by step loading the previously created wavelet coefficient files. Each time the file is uploaded, the image recovery function (inverse wavelet transform) will be called. We look what happened: link_1 (2 Mb) . Immediately I confess that the picture is loaded 10 times slower than the original. The point is that the quantized coefficients were saved to files as text and take up an order of magnitude more space. It was necessary to still apply the Huffman code or full compression of the coefficients. Browser Explorer does not want to display changes to canvas while the script is running. In Chrome, things are a little better, if we insert, say, alerts, then the stages will be visible ( link_2 (2 Mb) ). If the code will be executed "monotonously" then the behavior is similar to Explorer. Pleases with the predictability of the execution of Firefox code, and I advise you to watch link 1.
It's safe to say that it is possible to implement progressive loading with the help of HTML5, that modern browsers tolerate time-consuming mathematical calculations (with a modern computer). The question of the timely visualization of changes in the canvas and the relevance of the topic of progressive loading in general remains open. As noted earlier, not so often can be seen on the progressive jpg site, and browsers do not have jp2 support at all.
Source: https://habr.com/ru/post/144402/
All Articles