1

I have problem for the website when user uploading the image from some mobile device. The image is rotated 90 degree.

I have try successfully handle and rotate the image with Exif.js. (https://github.com/exif-js/exif-js)

The problem is how to put back the images (example with id="RotatedImage") to the input file type again (Example with id="inputImage") or submit it to the form?

 function orientation(img, canvas) {

            // Set variables
            var ctx = canvas.getContext("2d");
            ctx.imagesmoothingenabled = false;
            var exifOrientation = '';
            var width = img.width,
                height = img.height;

                console.log(width);
                console.log(height);

            // Check orientation in EXIF metadatas
            EXIF.getData(img, function() {
                var allMetaData = EXIF.getAllTags(this);
                exifOrientation = allMetaData.Orientation;
                console.log('Exif orientation: ' + exifOrientation);
            });

            // set proper canvas dimensions before transform & export
            if (jQuery.inArray(exifOrientation, [5, 6, 7, 8]) > -1) {
                canvas.width = height;
                canvas.height = width;
            } else {
                canvas.width = width;
                canvas.height = height;
            }

            // transform context before drawing image
            switch (exifOrientation) {
                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);
            }

            // Draw img into canvas
            ctx.drawImage(img, 0, 0, width, height);


        }
Bharata
  • 13,509
  • 6
  • 36
  • 50
Sky Blue
  • 203
  • 5
  • 15
  • 1
    [Send your canvas image](http://stackoverflow.com/questions/34711715/phpjs-how-to-do-fileuploads-in-html-form-as-content-type-multipart-via-js/34713226#34713226), instead of the original one. – Kaiido Jan 15 '18 at 07:19

0 Answers0