Summary of image compression methods in JS

This article mainly introduces the image compression method in JS, including the js method of compressing images in equal ratio. Friends who are interested in js can refer to this article

First think about what we have need? Most of the time we need to compress a File object and then turn it into a File object and pass it to the remote image server; sometimes we also need to compress a base64 string and then turn it into base64 The string is passed to the remote database; sometimes it may be a canvas, or an Image object, or directly the URL address of a picture. We need to compress and upload them to the remote; in the face of so many demands , Wang Er simply drew a picture:

##Alt text

2. Solution

As shown in the picture above, Wang Er wrote a total of seven methods, which basically cover the conversion and compression of most file types in JS, including:

1. urltoImage(url,fn) The required image object will be loaded through a url, where the url parameter is passed in the url of the image, and fn is the callback method, which contains the parameters of an Image object. The code is as follows:

function urltoImage (url,fn){
  var img = new Image();
  img.src = url;
  img.onload = function(){
    fn(img);
  }
};

2. imagetoCanvas(image) will convert an Image object into a Canvas type object, in which the image parameter is passed in an Image object, the code is as follows:

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

3. canvasResizetoFile(canvas,quality,fn) will compress and convert a Canvas object into a Blob type object; the canvas parameter is passed in a Canvas object; the quality parameter is passed in Enter a number type of 0-1, indicating the image compression quality; fn is the callback method, containing the parameters of a Blob object; the code is as follows:

function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },'image/jpeg',quality);
};

The Blob object here represents immutable raw data similar to a file object. Blobs represent data that is not necessarily

JavaScript native form. The File interface is based on Blob, inheriting the functionality of Blob and extending it to support files on the user's system. We can treat it as a File type. For more specific usage, please refer to MDN document

4. canvasResizetoDataURL(canvas,quality) will compress a Canvas object into a dataURL string, in which the canvas parameter is passed in A Canvas object; the quality parameter is passed in a number type of 0-1, indicating the image compression quality; the code is as follows:

methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL('image/jpeg',quality);
};

where For the toDataURL API, please refer to the MDN document

5. filetoDataURL(file,fn) will convert the File (Blob) type file into a dataURL string, where the file parameter is passed in a File (Blob) type file; fn is The callback method contains a dataURL string parameter; the code is as follows:

function filetoDataURL(file,fn){
  var reader = new FileReader();
  reader.onloadend = function(e){
    fn(e.target.result);
  };
  reader.readAsDataURL(file);
};

6. dataURLtoImage(dataurl,fn) will The dataURL string is converted into an Image type file. The dataurl parameter is passed in a dataURL string, and fn is the callback method, which contains the parameters of an Image type file. The code is as follows:

function dataURLtoImage(dataurl,fn){
  var img = new Image();
  img.onload = function() {
    fn(img);
  };
  img.src = dataurl;
};

7. dataURLtoFile(dataurl) will convert a string of dataURL strings into Blob type objects, in which the dataurl parameter is passed in a dataURL string, the code is as follows:

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

3. Further encapsulation

For commonly used methods, compress a File object and then Become a File object, we can encapsulate the above method again, refer to the following code:

function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

Among them, the file parameter is passed in A File (Blob) type file; the quality parameter is passed in a number type of 0-1, indicating the image compression quality; fn is the callback method, containing the parameters of a Blob type file.

It works like this:

var file = document.getElementById('demo').files[0];
fileResizetoFile(file,0.6,function(res){
  console.log(res);
  //拿到res，做出你要上传的操作；
})

In this case, image compression and uploading can be easily done Okay, I have packaged the above 8 methods and put them on github. If you like it, you can star it.

ps: Let’s take a look at the method of compressing images with JS equal ratio

function proDownImage(path,imgObj) { // 等比压缩图片工具 
  //var proMaxHeight = 185; 
  var proMaxHeight=300; 
  var proMaxWidth = 175; 
  var size = new Object();　 
  var image = new Image();　 
  image.src = path;　 
  image.attachEvent("onreadystatechange", 
  function() { // 当加载状态改变时执行此方法,因为img的加载有延迟 
    if (image.readyState == "complete") { // 当加载状态为完全结束时进入 
      if (image.width > 0 && image.height > 0) { 
        var ww = proMaxWidth / image.width; 
        var hh = proMaxHeight / image.height;　 
        var rate = (ww < hh) ? ww: hh; 
        if (rate <= 1) {　 
          alert("imgage width*rate is:" + image.width * rate); 
          size.width = image.width * rate; 
          size.height = image.height * rate; 
        } else { 
          alert("imgage width is:" + image.width);　　 
          size.width = image.width;　　 
          size.height = image.height;　　　 
        }　 
      } 
    } 
    imgObj.attr("width",size.width); 
    imgObj.attr("height",size.height); 
  }); 
}

Summary

The above is a summary of the image compression methods in JS introduced by the editor. I hope it will be helpful to everyone!

Related recommendations:

JS compressed uploaded images

js image carousel manual switching effect example code

JS image preloading example

The above is the detailed content of Summary of image compression methods in JS. For more information, please follow other related articles on the PHP Chinese website!