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.

Click: join