(Javascript)如何在图像上传之前更改图像EXIF?

时间:2018-01-15 07:15:31

标签: javascript jquery html web exif

当用户从某些移动设备上传图片时,我的网站存在问题。图像旋转90度。

我尝试使用Exif.js成功处理并旋转图像。 (https://github.com/exif-js/exif-js

问题是如何将图像(带有id="RotatedImage"的示例)再次放回输入文件类型(带id="inputImage"的示例)或将其提交到表单?

 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);


        }

0 个答案:

没有答案