How to effectively compress images using JS

Preface

The company's mobile business requires that when users upload pictures, the front end compresses the picture size and then uploads it to the server. This can reduce the mobile terminal's upstream traffic, shorten the user's upload waiting time, and optimize the user experience.

By the way, the cases in this article have been organized into plug-ins and uploaded to npm. You can install and use them through npm install js-image-compressor -D. You can download them from github.

So this paper will try to solve the following problems:

• Understand the conversion relationship between Image objects, data URLs, Canvas and File (Blob);
• Key techniques for image compression;
• Black screen problem when compressing very large images.

Conversion relationship

Possible scenarios in actual applications: Most of the time, we directly read the File object uploaded by the user, read and write it to the canvas, compress it using the Canvas API, convert it into a File (Blob) object after compression, and upload it to the remote image server; sometimes we also need to compress a base64 string and then convert it into a base64 string to pass it to the remote database or convert it into a File (Blob) object. Generally, they have the following conversion relationship:

Specific implementation

The following will implement the transformation methods in the transformation relationship diagram one by one.

file2DataUrl(file, callback)

The local images uploaded by users through the page tag <input type="file" /> are directly converted into date URL string format. You can use the FileReader file reading constructor. The FileReader object allows a Web application to asynchronously read the contents of a file (or raw data buffer) stored on the computer, using a File or Blob object to specify the file or data to read. The instance method readAsDataURL reads the file content and converts it into a base64 string. After reading, the file content is available in the instance attribute result.

function file2DataUrl(file, callback) {
 var reader = new FileReader();
  reader.onload = function () {
    callback(reader.result);
  };
  reader.readAsDataURL(file);
}

Data URLs consist of four parts: a prefix (data:), a MIME type indicating the type of data, an optional base64 tag if it is non-text, and the data itself:

data:<mediatype>,<data>

For example, a png format image is converted into a base64 string: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAgAElEQVR4XuxdB5g.

file2Image(file, callback)

If you want to cache the pictures uploaded by users locally and display them with img tags, in addition to using the base64 string converted by the above method as the picture src, you can also directly use the URL object to reference the URL of the data stored in File and Blob. The benefit of using an object URL is that you can use the file contents directly without having to read them into JavaScript. To do this, simply provide the object URL wherever the file content is required.

function file2Image(file, callback) {
 var image = new Image();
 var URL = window.webkitURL || window.URL;
 if (URL) {
 var url = URL.createObjectURL(file);
    image.onload = function() {
      callback(image);
      URL.revokeObjectURL(url);
    };
    image.src = url;
  } else {
    inputFile2DataUrl(file, function(dataUrl) {
      image.onload = function() {
        callback(image);
      }
      image.src = dataUrl;
    });
  }
}

Note: To create an object URL, use the window.URL.createObjectURL() method and pass in a File or Blob object. If the data is no longer needed, it is best to release the content it occupies. But as long as there is code referencing the object URL, the memory will not be released. To manually release the memory, pass the object URL to URL.revokeObjectURL().

url2Image(url, callback)

Get the Image object through the image link (url). Since the image loading is asynchronous, put it in the callback function callback to return the obtained Image object.

function url2Image(url, callback) {
 var image = new Image();
  image.src = url;
  image.onload = function() {
    callback(image);
  }
}

image2Canvas(image)

Use the drawlmage() method to draw the Image object on the Canvas object.

drawImage has three syntax forms:

void ctx.drawImage(image, dx, dy);

void ctx.drawImage(image, dx, dy, dWidth, dHeight);

void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

parameter:

image element drawn to the context;

sx draws the X-axis coordinate of the upper left corner of the selection box based on Image;

sy Draw the Y-axis coordinate of the upper left corner of the selection box based on Image;

sWidth draws the selection box width;

sHeight draws the selection box width;

dx The X-axis coordinate of the upper left corner of the Image on the target canvas;

The Y-axis coordinate of the upper left corner of the dy Image on the target canvas;

dWidth The width of the Image drawn on the target canvas;

dHeight The height of the Image drawn on the target canvas;

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

canvas2DataUrl(canvas, quality, type)

The HTMLCanvasElement object has a toDataURL(type, encoderOptions) method that returns a data URL containing the image to display. You can also specify the output format and quality.

The parameters are:

type: Picture format, the default is image/png.

encoderOptions can select the image quality from the range of 0 to 1 when the image format is specified as image/jpeg or image/webp. If the value is outside the range, the default value 0.92 will be used and other parameters will be ignored.

function canvas2DataUrl(canvas, quality, type) {
 return canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
}

dataUrl2Image(dataUrl, callback)

The image link can also be a base64 string, which can be directly assigned to the Image object src.

function dataUrl2Image(dataUrl, callback) {
 var image = new Image();
  image.onload = function() {
    callback(image);
  };
  image.src = dataUrl;
}

dataUrl2Blob(dataUrl, type)

Converts a data URL string to a Blob object. The main idea is: first extract the data part of the data URL, use atob to decode the base64-encoded string, then convert it into Unicode encoding, store it in a Uint8Array (8-bit unsigned integer array, each element is one byte) type array, and finally convert it into a Blob object.

function dataUrl2Blob(dataUrl, type) {
 var data = dataUrl.split(',')[1];
 var mimePattern = /^data:(.*?)(;base64)?,/;
 var mime = dataUrl.match(mimePattern)[1];
 var binStr = atob(data);
 var arr = new Uint8Array(len);

 for (var i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }
 return new Blob([arr], {type: type || mime});
}

canvas2Blob(canvas, callback, quality, type)

HTMLCanvasElement has a toBlob(callback, [type], [encoderOptions]) method to create a Blob object to display the image on the canvas; this image file can be cached or saved locally, at the discretion of the user agent. The second parameter specifies the image format. If not specified, the image type defaults to image/png and the resolution is 96dpi. The third parameter is used to set the quality of the output image for images in image/jpeg format.

function canvas2Blob(canvas, callback, quality, type){
  canvas.toBlob(function(blob) {
    callback(blob);
  }, type || 'image/jpeg', quality || 0.8);
}

To be compatible with older browsers, as a polyfill solution for toBlob, you can use the data URL to generate a Blob method dataUrl2Blob as the HTMLCanvasElement prototype method.

if (!HTMLCanvasElement.prototype.toBlob) {
 Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
  value: function (callback, type, quality) {
 let dataUrl = this.toDataURL(type, quality);
    callback(dataUrl2Blob(dataUrl));
  }
 });
}

blob2DataUrl(blob, callback)

Convert the Blob object into data URL data. Since the instance readAsDataURL method of FileReader not only supports reading files, but also supports reading Blob object data, the above file2DataUrl method can be reused here:

function blob2DataUrl(blob, callback) {
  file2DataUrl(blob, callback);
}

blob2Image(blob, callback)

Convert a Blob object into an Image object. You can reference files through URL objects. You can also reference file-like objects such as Blob. Similarly, you can reuse the file2Image method above:

function blob2Image(blob, callback) {
  file2Image(blob, callback);
}

upload(url, file, callback)

To upload images (compressed), you can use FormData to pass in the file object and upload the file directly to the server via XHR.

function upload(url, file, callback) {
 var xhr = new XMLHttpRequest();
 var fd = new FormData();
  fd.append('file', file);
  xhr.onreadystatechange = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
 //Upload successful callback && callback(xhr.responseText);
    } else {
 throw new Error(xhr);
    }
  }
  xhr.open('POST', url, true);
  xhr.send(fd);
}

You can also use FileReader to read the file content and convert it into binary for uploading

function upload(url, file) {
 var reader = new FileReader();
 var xhr = new XMLHttpRequest();

  xhr.open('POST', url, true);
  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

  reader.onload = function() {
    xhr.send(reader.result);
  };
  reader.readAsBinaryString(file);
}

Implementing simple image compression

After being familiar with the specific implementation of the above various image conversion methods, encapsulate them in a common object util, and then combine them with the compression conversion flow chart, here we can simply implement image compression:
First, the uploaded image is converted into an Image object, then written to the Canvas canvas, and finally the Canvas object API adjusts the size and output of the image to achieve compression.

/**
 * Simple image compression method* @param {Object} options related parameters*/
(function (win) {
 var REGEXP_IMAGE_TYPE = /^image\//;
 var util = {};
 var defaultOptions = {
    file: null,
    quality: 0.8
  };
 var isFunc = function (fn) { return typeof fn === 'function'; };
 var isImageType = function (value) { return REGEXP_IMAGE_TYPE.test(value); };

 /**
   * Simple image compression constructor * @param {Object} options related parameters */
 function SimpleImageCompressor(options) {
    options = Object.assign({}, defaultOptions, options);
 this.options = options;
 this.file = options.file;
 this.init();
  }

 var _proto = SimpleImageCompressor.prototype;
  win.SimpleImageCompressor = SimpleImageCompressor;

 /**
   * Initialization */
  _proto.init = function init() {
 var _this = this;
 var file = this.file;
 var options = this.options;

 if (!file || !isImageType(file.type)) {
      console.error('Please upload the image file!');
 return;
    }

 if (!isImageType(options.mimeType)) {
      options.mimeType = file.type;
    }

    util.file2Image(file, function (img) {
 var canvas = util.image2Canvas(img);
      file.width = img.naturalWidth;
      file.height = img.naturalHeight;
      _this.beforeCompress(file, canvas);

      util.canvas2Blob(canvas, function (blob) {
        blob.width = canvas.width;
        blob.height = canvas.height;
        options.success && options.success(blob);
      }, options.quality, options.mimeType)
    })
  }

 /**
   * Before compression, after reading the image hook function */
  _proto.beforeCompress = function beforeCompress() {
 if (isFunc(this.options.beforeCompress)) {
 this.options.beforeCompress(this.file);
    }
  }

 // Omit `util` public method definition // ...

 // Add the `util` public method to the instance's static properties for (key in util) {
 if (util.hasOwnProperty(key)) {
      SimpleImageCompressor[key] = util[key];
    }
  }
})(window)

This simple image compression method call and input parameters:

var fileEle = document.getElementById('file');

fileEle.addEventListener('change', function () {
  file = this.files[0];

 var options = {
    file: file,
    quality: 0.6,
    mimeType: 'image/jpeg',
 // callback before compression beforeCompress: function (result) {
      console.log('Image size before compression: ', result.size);
      console.log('mime type: ', result.type);
 // Preview the uploaded image on the page // SimpleImageCompressor.file2DataUrl(result, function (url) {
 // document.getElementById('origin').src = url;
 // })
    },
 // Compression success callback success: function (result) {
      console.log('Image size after compression: ', result.size);
      console.log('mime type: ', result.type);
      console.log('Compression rate: ', (result.size / file.size * 100).toFixed(2) + '%');

 // Generate compressed image and display it on the page // SimpleImageCompressor.file2DataUrl(result, function (url) {
 // document.getElementById('output').src = url;
 // })

 // Upload to remote server // SimpleImageCompressor.upload('/upload.png', result);
    }
  };

 new SimpleImageCompressor(options);
}, false);

If you don’t mind that this demo is too simple, you can click here to try it out. If you have enough patience to upload several types of pictures, you will find that there are still the following problems:

The size of the compressed output image is fixed to the original image size, but in practice you may need to control the output image size while also achieving the purpose of compressing the size;

png format images are compressed in the same format, the compression rate is not high, and there may be a phenomenon of "increasing instead of decreasing";

In some cases, the conversion of other formats into PNG format may also result in an "increase instead of decrease" phenomenon;

Large-size PNG format images may appear black screen after compression on some mobile phones;

Improved image compression

As the saying goes, "Rome was not built in a day." Through the above experiments, we found many shortcomings. The following will analyze the problems one by one and seek solutions.

The size of the compressed output image is fixed to the original image size, but in practice you may need to control the output image size while also achieving the purpose of compressing the size;

In order to avoid deformation of compressed images, geometric scaling is generally used. First, the aspect ratio of the original image must be calculated. The height set by the user is multiplied by the aspectRatio to obtain the width after geometric scaling. If it is smaller than the width set by the user, the height set by the user is used as the basis for scaling. Otherwise, the width is used as the basis for scaling.

var aspectRatio = naturalWidth / naturalHeight;
var width = Math.max(options.width, 0) || naturalWidth;
var height = Math.max(options.height, 0) || naturalHeight;
if (height * aspectRatio > width) {
  height = width / aspectRatio;
} else {
  width = height * aspectRatio;
}

The size of the output image is determined. The next step is to create a Canvas according to this size and draw the image on it. Here we can modify the image2Canvas method mentioned above slightly:

function image2Canvas(image, destWidth, destHeight) {
 var canvas = document.createElement('canvas');
 var ctx = canvas.getContext('2d');
  canvas.width = destWidth || image.naturalWidth;
  canvas.height = destHeight || image.naturalHeight;
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 return canvas;
}

png format images are compressed in the same format, the compression rate is not high, and there may be a phenomenon of "increasing instead of decreasing"

Generally, it is not recommended to compress png format images into their own format, as the compression rate is not ideal and sometimes it may even cause the quality of the images to become worse.

Because we have two compression key APIs in the "concrete implementation":

toBlob(callback, [type], [encoderOptions]) The encoderOptions parameter is used to set the quality of the output image for images in image/jpeg format;

toDataURL(type, encoderOptions parameter encoderOptions When the image format is specified as image/jpeg or image/webp, the image quality can be selected from the range of 0 to 1.

Neither has any compression effect on png format images.

There is a compromise solution. We can set a threshold. If the quality of the png image is less than this value, we will still compress and output it in png format, so that the worst output result will not be too bad. On this basis, if the size of the compressed image "increases instead of decreases", we will process the output source image to the user. When the image quality is greater than a certain value, we compress it into jpeg format.

// `png` format image size exceeds `convertSize`, convert to `jpeg` format if (file.size > options.convertSize && options.mimeType === 'image/png') {
  options.mimeType = 'image/jpeg';
}
// Omit some code // ...
// If the output width and height expected by the user is not greater than the width and height of the source image, the output file size is larger than the source file, and the source file is returned if (result.size > file.size && !(options.width > naturalWidth || options.height > naturalHeight)) {
  result = file;
}

Large-size PNG format images may appear black screen after compression on some mobile phones;

Because major browsers support different maximum Canvas sizes

If the image size is too large, when creating a canvas of the same size and then drawing the image on it, an abnormal situation will occur, that is, the generated canvas has no image pixels, and the default background color of the canvas itself is black, which will cause the image to appear "black screen".

Here you can prevent the generated canvas from going out of bounds by controlling the maximum width and height of the output image, and solve the "black screen" problem by covering the default black background with a transparent color:

// ...
// Limit the minimum and maximum width and height var maxWidth = Math.max(options.maxWidth, 0) || Infinity;
var maxHeight = Math.max(options.maxHeight, 0) || Infinity;
var minWidth = Math.max(options.minWidth, 0) || 0;
var minHeight = Math.max(options.minHeight, 0) || 0;

if (maxWidth < Infinity && maxHeight < Infinity) {
 if (maxHeight * aspectRatio > maxWidth) {
    maxHeight = maxWidth / aspectRatio;
  } else {
    maxWidth = maxHeight * aspectRatio;
  }
} else if (maxWidth < Infinity) {
  maxHeight = maxWidth / aspectRatio;
} else if (maxHeight < Infinity) {
  maxWidth = maxHeight * aspectRatio;
}

if (minWidth > 0 && minHeight > 0) {
 if (minHeight * aspectRatio > minWidth) {
    minHeight = minWidth / aspectRatio;
  } else {
    minWidth = minHeight * aspectRatio;
  }
} else if (minWidth > 0) {
  minHeight = minWidth / aspectRatio;
} else if (minHeight > 0) {
  minWidth = minHeight * aspectRatio;
}

width = Math.floor(Math.min(Math.max(width, minWidth), maxWidth));
height = Math.floor(Math.min(Math.max(height, minHeight), maxHeight));

// ...
// Override the default fill color (#000)
var fillStyle = 'transparent';
context.fillStyle = fillStyle;

At this point, the above unexpected problems have been solved one by one

Summarize

We have sorted out the entire process from uploading local images through the page tag <input type="file" /> to image compression, and also covered some unexpected situations that still exist in actual use, and provided corresponding solutions. The improved version of image compression has been organized into a plug-in and uploaded to npm. It can be installed and used through npm install js-image-compressor -D. It can be downloaded from github.

The above is the details of how to use JS to effectively compress images. For more information about JS effective compression of images, please pay attention to other related articles on 123WORDPRESS.COM!