Question

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

DropZoneJS提供了＆＃34;添加的文件＆＃34;包含文件对象的事件。连接该事件处理程序，然后我可以将其参数传递给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
        }
    );

        });

我可以成功完成旋转，但我不确定是否会使用生成的画布，并更换掉区＆＃34;文件＆＃34;与结果内容对象。

任何人都可以确认＆＃34; fileadded＆＃34; DropzoneJS中的事件允许我修改文件数据（或者如果它是只读的）

...谢谢

-Ben

Answer 1

首先，感谢您对加载图像库的建议，因为我正在寻找如何处理EXIF数据。

回答你的问题：如果你在谈论缩略图显示，你可以提供一个接受文件的“接受”功能，以及来自dropzone本身的完成功能，并根据需要显示缩略图。

我意识到您可能会要求使用加载图像库中的文件进行上传。如果是这种情况，我会尝试替换accept函数中的文件数据。加载图像库的作者也有一个blob javascript画布，可能有所帮助：https://github.com/blueimp/JavaScript-Canvas-to-Blob

Answer 2

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

2 - 修改 dropzone.js

查找＆amp;在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; } });
替换＆gt; drawImageIOSFix（ctx to drawImageIOSFix（orientation，ctx
查找＆amp;在vertSquashRatio = detectVerticalSquash（img）;
之后添加
dh = dh / vertSquashRatio; ctx.translate( dx+dw/2, dy+dh/2 ); ctx.rotate(o*Math.PI/180); dx = -dw/2; dy = -dh/2;

Answer 3

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

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

我不知道它为什么会起作用，但似乎Dropzone只是“注意到”它。在构建了一个更复杂的解决方案后，我意识到了这一点。

请注意，这不会影响发送到服务器的文件，只会显示Dropzone显示的缩略图。我正在使用ImageMagick shuffle(['A','B','C','D','E'], 10, true);来修复服务器上的上传文件。

Answer 4

我也发现dropzone无法正确旋转缩略图。这是我的解决方法。您的项目需要以下npm软件包： - 拖放区 -exif -blueimp-load-image

Blueimp加载图像用于缩放（创建缩略图），它还处理exif信息以正确旋转图像。

我通过创建方向正确的缩略图解决了问题，然后简单地替换了dropzone创建的缩略图的img src。将函数createThumbnail设置为dropzone文件添加事件的回调：

createThumbnail: function(file){
            var scaledImage = loadImage.scale(
                file,
                {
                    maxWidth: 150,
                    imageOrientation: true
                }
            );
            $('[data-dz-thumbnail]').last().attr("src", scaledImage.dataURL);
        },

DropZoneJS + JavascriptLoadImage：旋转图像？

4 个答案: