How does the picture load img.onload, display the progress bar?

problem description

due to the need for compression on the mobile phone, it is relatively slow to display images after selecting pictures, especially large ones. Usually, images above 6m need at least 5s, which brings challenges to the user experience.

the environmental background of the problems and what methods you have tried

process: select picture-"compress -" Mobile phone display picture = "upload, mobile phone display this link has a problem.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
Compression is canvas compression, and base64, upload of pictures displayed on mobile phones is blob

what result do you expect? What is the error message actually seen?

can you make some progress according to base64,?

because there is a progress bar, it will improve the user experience

Cordova vux mixed-app

Mar.30,2021

use ajax-get to request an image, and you can get the download progress, which is equal to 100% and then assigned to the src, of img, for example:

<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', './1.jpg');
    xhr.onprogress = function (event) {
        if (event.lengthComputable) {
            console.log((event.loaded / event.total) * 100); // 
        }
    };
    xhr.send();
</script>

http://www.ionic.wang/ng_cord.

Previous: The native scroll bar in vue does not work, and the scroll bar does not work until the dom change is triggered. Is there any good solution?

Next: How to implement the interface of Oauth2.0 's refresh token?