Revision history [back]

To correct the orientation of images during uploading using Plupload, you can use the exif.js library. This library reads the EXIF data from the image file that contains information about the camera orientation and then rotates the image accordingly.

Here are the steps to use exif.js with Plupload:

1. Add the exif.js library to your HTML file using a script tag.

2. In the Plupload configuration, set the "preprocess" option to a function that will read the EXIF data from the uploaded file and rotate the image accordingly:

var uploader = new plupload.Uploader({
  // other configuration options
  preprocess: function(file, done) {
    // read the file using the FileReader API
    var reader = new FileReader();
    reader.onload = function(event) {
      // get the orientation from the EXIF data
      var orientation = EXIF.getTag(this.result, "Orientation");
      // rotate the image if necessary
      if (orientation != undefined && orientation >= 2 && orientation <= 8) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var img = new Image();
        img.onload = function() {
          var width = img.width;
          var height = img.height;
          if ([5,6,7,8].indexOf(orientation) > -1) {
            canvas.width = height;
            canvas.height = width;
          } else {
            canvas.width = width;
            canvas.height = height;
          }
          switch (orientation) {
            case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
            case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
            case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
            case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
            case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
            case 7: ctx.transform(0, -1, -1, 0, height, width); break;
            case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
            default: ctx.transform(1, 0, 0, 1, 0, 0);
          }
          ctx.drawImage(img, 0, 0);
          canvas.toBlob(function(blob) {
            // overwrite the original file with the corrected one
            file.blob = blob;
            done();
          }, file.type);
        };
        img.src = event.target.result;
      } else {
        // no rotation needed
        done();
      }
    };
    reader.readAsArrayBuffer(file.blob);
  }
});

1. Make sure to include the exif.js library file in the page where you are using Plupload, and the necessary EXIF functionalities are available.

By following the above steps, the orientation of images can be corrected during uploading using Plupload.