JS uploads pictures and uses canvas to realize picture compression

One of the basic functions of the project - uploading pictures by mobile phone

Technology stack:

1. Use canvas for compression (this should be familiar)
2. Use EXIF JS to get the photo rotation angle attribute, because some mobile phones will take a rotation angle attribute for the photo taken due to the direction of the mobile phone when taking photos

Core code:

var _orientation; //Photo angle properties
EXIF.getData(fileInput, function () {
    _orientation = EXIF.getTag(fileInput, 'Orientation');
});
let reader = new FileReader();
reader.readAsDataURL(fileInput);
reader.onload = function (e) {
    var image = new Image();
    image.src = e.target.result;
    image.onload = function () {
      var canvas = document.createElement("canvas"); //Create a temporary canvas
      var _width = this.width, _height = this.height, _ratio = _height / _width;
      //Isometric compression
      if (this.width > 800) {
        _width = 800;
        _height = 800 * _ratio;
      }    
      canvas.width = _width;
      canvas.height = _height;
      var ctx = canvas.getContext("2d");
      switch (_orientation) {
        case 6:     // Rotate 90 degrees
          canvas.width = _height;
          canvas.height = _width;
          ctx.rotate(Math.PI / 2);
          ctx.drawImage(this, 0, -_height, _width, _height);
          break;
        case 3:     // Rotate 180 degrees
          ctx.rotate(Math.PI);
          ctx.drawImage(this, -_width, -_height, _width, _height);
          break;
        case 8:     // Rotational -90 degree
          canvas.width = _height;
          canvas.height = _width;
          ctx.rotate(3 * Math.PI / 2);
          ctx.drawImage(this, -_width, 0, _width, _height);
          break;
        default:
          ctx.drawImage(this, 0, 0, _width, _height);
      }
      //Data objects to be uploaded
      const resultBase =dataURItoBlob(canvas.toDataURL("image/jpeg", 0.9));
      //... omit upload operation code
    };
}
//Convert dataURI to Blob for upload
dataURItoBlob:function(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(dataURI.split(',')[1]);
    else
      byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
  }

You will often encounter bug s and other problems. It can be frustrating, but try to stay calm and think systematically. Remember that practice is the best way to solve problems.

We collect stones, but we must always look to the Cathedral of the future.

Here I recommend my front-end learning exchange group: 784783012, which is all front-end learning. From the most basic HTML+CSS+JS [cool special effects, games, plug-in packaging, design mode] to the mobile HTML5 project practical learning materials have been sorted out and sent to each front-end small partner. The latest technology, synchronized with the needs of enterprises, where friends are learning and communicating, every day there will be Daniel regularly explain the front-end technology!

Click: join

Tags: Javascript Mobile Attribute html5

Posted on Sat, 30 Nov 2019 17:42:58 -0800 by sectachrome