How to implement image compression in JS

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

First think about what needs we have? 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 It may also 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, Wang Er simply drew a picture:

Alt text

2. Solution

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

1. urltoImage(url,fn) will load the required image object through a url, where the url parameter is passed in the url of the image, and fn is the callback method , 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 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 a number type of 0-1, which means 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 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, including 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 convert a string of dataURL strings into an Image type file, in which the dataurl parameter is passed in a dataURL string, and 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 a 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);
    })
  })
}

Among them, the file parameter is passed into 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, including a parameter of the 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 encapsulated the above 8 methods and put them on github. Like it If so, you can star hard.

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 <p>Related recommendations: <br></p> <p><a href="http://www.php.cn/js-tutorial-382846.html" target="_self">How to implement image compression method in JS</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-382116.html" target="_self">Sample code of Canvas and image compression</a></p><p><a href="http://www.php.cn/xiaochengxu-362903.html" target="_self">HTML5 implements image compression upload function In-depth analysis</a></p>

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