js and canvas implement image preview compression upload

This article mainly shares the method of compressing and uploading image previews with js and canvas, combined with the example code and explanation, I hope it can help everyone.

Step 1: The user selects the image to be uploaded

<input type="file" accept="image/*" type="file"" name="imageFile" onchange="upload()">

After the image is selected, the upload function will be triggered. We need to obtain the resource of the image in this function and transfer it Compress and draw it using canvas. If you need to upload it to the server, you can also use ajax or other methods to upload it.

Second step: Get the compressed preview of the image resource and upload it

function upload() {
	let file = document.querySelector('input[type=file]').files[0]  // 获取选择的文件，这里是图片类型
	let reader = new FileReader()
        reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式
        reader.onload = function(e) { // 文件读取完成时触发 
            let result = e.target.result // base64格式图片地址 
            var image = new Image() image.src = result // 设置image的地址为base64的地址 
            image.onload = function(){ 
                var canvas = document.querySelector("#canvas"); 
                var context = canvas.getContext("2d"); 
                canvas.width = image.width; // 设置canvas的画布宽度为图片宽度 
                canvas.height = image.height; 
                context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片 
                let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量 
                                                                   // dataUrl 为压缩后的图片资源，可将其上传到服务器 
            } 
       }
 }

Now let’s compare whether the image is successfully compressed:

Original image size:
Compression The ratio is set to 0.92:
The compression ratio is set to 0.52

At first glance, do you think it’s strange why the zoom ratio is set to 0.92, but the picture is actually smaller than The original picture is big? In fact, after the image is encoded by base64, it will become larger than the original image. For specific reasons, you can check the encoding principle of base64. It seems that we have successfully compressed the image!

Note: Canvas is not supported below IE9; try not to use base64 for large pictures, which will affect the response speed.

Related recommendations:

php uploads files to the server and implements image preview

The above is the detailed content of js and canvas implement image preview compression upload. For more information, please follow other related articles on the PHP Chinese website!