JS+Canva enables preview compression and image upload functions

This time I will bring you JS Canva’s preview compression and upload pictures functions, JS Canva’s preview compression and picture upload functionsNotesWhat are they? Here are actual cases. Let’s take a look.

This article mainly introduces JS and Canvas to implement image preview, compression and upload functions. 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 a compressed preview of the image resource. Upload, please refer to this article for the specific implementation code

First let’s take a rendering to reduce 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 upload it by other means.

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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use jquery content filter

Detailed explanation of using jQuery’s compound selector

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