How to implement image compression method in JS

This article mainly introduces the image compression methods in JS, including the method of compressing images in equal ratios. Friends in need can refer to it. I hope it can help everyone.

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 a base64 string and pass it 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 location; faced with so many demands, we simply drew one Picture:

Alt text

2. Solution

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

1. urltoImage(url,fn) will load the required files through a url. Image object, in which 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 into 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 a Canvas object into a Blob type object; 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; 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 native to JavaScript. 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);
};

The toDataURL API can refer to the MDN document

5. filetoDataURL(file,fn) will convert File (Blob) type file into dataURL string, where the file parameter is passed in a File (Blob) type file; fn is the callback method, containing a dataURL string Parameters; 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 convert a string of dataURL strings into an Image type file, in which a dataURL character is passed in as the dataurl parameter. String, fn is the callback method, including 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 object, 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 the commonly used method of compressing a File object and then turning it into a File object, we can re-encapsulate the above method, refer to the following code:

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

where , 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. I have used the above 8 methods. Package it and put it on github. If you like it, you can star it.

Reference document:

MDN

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

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); 
  }); 
}

Related recommendations:

Recommend 10 commonly used image compression and upload usages, welcome to download!

HTML5 mobile development image compression upload function

High-performance WEB development image compression

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