JS and Canvas implement image preview, compression and upload functions

This article mainly introduces JS and Canvas to implement the image preview, compression and upload function. There are roughly two steps to implement this function. The first step is for the user to select the image that needs to be uploaded. The second step is to obtain the image resource, compress the preview and upload it. Specifically Please refer to this article to implement the code.

Let’s take a look at the renderings first to calm down the shock.

The first step: 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. In this function, we need to obtain the resource of the image, compress it and draw it using canvas. If we need to upload it to the server, we can also use ajax or other methods. Upload.

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:

The compression 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 image is larger than the original image when the zoom ratio is set to 0.92? 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JavaScript step by step implementation of a regular expression of date of birth

Tutorial on using Vue to develop dynamic refresh Echarts components Detailed explanation

Example of how to use the selectpicker drop-down box in bootstrap

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