DropZoneJS + JavascriptLoadImage：旋转图像？

Question

我正在尝试结合 DropZoneJS（在此处找到）和 JavascriptLoadImage（在此处找到）来创建一个解决方案，用户可以在其中拖放文件进行上传，并根据图像中的 EXIF 元数据信息，它会旋转它（包括预览缩略图）（如有必要）。我认为提供了所有必要的部分：

DropZoneJS 提供了包含文件对象的“ addedfile”事件。连接该事件处理程序，然后我可以将其参数传递给 JavascriptLoadImage.parseMetaData 函数并正确读取存储的方向值：

var myDropZone = $("#my-awesome-dropzone").dropzone({ url: "/file/post" });

        myDropZone[0].dropzone.on("addedfile", function (file) {


//Successfully loads the image, flips it and sticks the resulting HTML5 canvas in the DOM for display.
            loadImage(file, function (img) {
                document.body.appendChild(img);
            },

            {
                orientation: 2,
                canvas:true
            }
            );


            loadImage.parseMetaData(file, function (data) {
                if (!data.imageHead) {
                    return;
                }
                var orientation = data.exif.get('Orientation');
            },
        {
            maxMetaDataSize: 262144,
            disableImageHead: false
        }
    );

        });

我可以成功进行旋转，但我不确定是否使用生成的画布，并用生成的内容替换放置区“文件”对象。

• 任何人都可以确认 DropzoneJS 中的“文件添加”事件是否允许我修改文件数据（或者它是否为只读）

谢谢...

-本

Answer 1

如果您使用的是最新的 Dropzone（用 5.4.0 测试），它会自动修复缩略图的方向，只要您在页面中包含exif.js库：

https://github.com/exif-js/exif-js

我不知道它为什么有效，但似乎 Dropzone 只是“注意到”了它。在构建了一个更复杂的解决方案来实现相同的目标后，我意识到了这一点。

请注意，这不会影响发送到服务器的文件，只会影响 Dropzone 显示的缩略图。我正在使用 ImageMagick-auto-orient修复服务器上上传的文件。

Answer 2

1 -包括https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js

2 -编辑dropzone.js

• 在 img.onload = function() { 后查找并添加

  var orientation = 0;
  EXIF.getData(img, function() {
      switch(parseInt(EXIF.getTag(this, "Orientation"))){
          case 3: orientation = 180; break;
          case 6: orientation = -90; break;
          case 8: orientation = 90; break; 
      }
  });
  

• 替换>drawImageIOSFix(ctx 为drawImageIOSFix(方向, ctx

• 在 vertSquashRatio = detectorVerticalSquash(img); 之后查找并添加

  dh = dh / vertSquashRatio;
  ctx.translate( dx+dw/2, dy+dh/2 );
  ctx.rotate(o*Math.PI/180);
  dx = -dw/2;
  dy = -dh/2;