Talk about uploading pictures and compressing files

preface

The main reason is that the fastdFS of the company uploads a large number of pictures every day, resulting in insufficient memory, so the students at the front and back end have to compress the pictures.Copy the code

Implementation approach

Train of thought

  1. At the beginning, I wanted to use the PANDA compression Api on the official website that I had been using before to compress and found that it basically existed in the server side to take pictures and request remote addresses and then save them, which was not suitable for our business scenarios.
  2. It is widely mentioned on the Internet that the size of the picture (W/H) is set to half by converting uploaded files to canvas. Based on this idea, we wrote the implementation code.

The implementation code

  1. Simple HTML code

    <input accept="image/*" multiple class="file" id="file" type="file" onchange="changepic()" />
Copy the code
  1. Get files and convert files
    let file = document.getElementById('file');
    let filsval = file.files[0];
Copy the code

The variable filsval can be printed on the console, and its prototype is a File object and then we go layer by layer and it turns out to be a BLOb object. Blob

Convert the contents of the file object read into a Blob stream address, which can be assigned directly to the IMG SRC to view the image directly. To do that, we can create a New IMG object, write it to canvas and scale it equally for the size of the image. The API for the Canvas itself turns the Canvas into a toDataURL or directly into a BLOB object.

  1. Post the complete code
    function changepic() {
        let file = document.getElementById('file');
        let reader = new FileReader();
        let filsval = file.files[0];
        
        reader.readAsDataURL(filsval);
        reader.onload = function(e) {
            console.log(e)
            let img = new Image();
            img.src = e.target.result;
            // It is perfectly possible to create an IMG test in dom

            img.onload = () = > {
                let canvasUrl = imagetoCanvas(img)
                console.log('canvasUrl++++++', canvasUrl)
                let blobUrl = dataURLToBlob(canvasUrl)
                var formData = new FormData();
                formData.append("files", blobUrl, "image.png");
                $.ajax({
                    type: 'post'.url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'.processData: false.contentType: false.data: formData,
                    success: (res) = > {
                        console.log('res+++++', res)
                    }
                })

            }
        }
    }

    function imagetoCanvas(image) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = image.width / 2;
        canvas.height = image.height / 2;
        ctx.drawImage(image, 0.0, canvas.width, canvas.height);
        return canvas.toDataURL()
    }

    function dataURLToBlob(dataurl) {
        var arr = dataurl.split(', ');
        var mime = arr[0].match(/ : (. *?) ; /) [1];
        var bstr = atob(arr[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }
Copy the code

Write in the last

The real purpose of writing this article is that there is no complete article on the Internet (by the way, to clarify the understanding of the file object), and the above code is perfectly executable.

Key points: MY classmates and I on the server side tested that the compression capacity of the lower front end was too small, only 4M to 3M, while the students on the server side could directly compress the JAVA package Thumbnailator to hundreds of K. Get it all (Manual dog head)

  • If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊