Canvas DropZoneJS+；JavascriptLoadImage：旋转图像？

我正在尝试结合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
        }
    );

        });

我可以成功地进行旋转，但我不确定是否要使用生成的画布，并用生成的内容替换dropzone“file”对象

• 有人能确认DropzoneJS中的“fileadded”事件是否允许我修改文件数据（或者是否为只读）

谢谢

---

-Ben

首先，感谢您推荐加载图像库，因为我正在寻找如何处理EXIF数据

回答您的问题：如果您谈论的是缩略图显示，您可以提供一个“接受”函数来接收文件，以及一个来自dropzone本身的done函数，并根据需要显示缩略图

我意识到您可能会询问使用load image library中的文件进行上传。如果是这种情况，我会尝试替换accept函数中的文件数据。load image library的作者也有一个画布到blob javascript，这可能会有所帮助：

1-包括

2-编辑dropzone.js

• 在img.onload=function（）之后查找并添加{

• 替换>drawImageIOSFix（ctx到drawImageIOSFix（方向，ctx

• 在vertSquashRatio=detectVerticalSquash（img）之后查找并添加

---

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

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

---

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

-auto orient

修复服务器上上载的文件。

我也发现Dropzone无法正确旋转缩略图。这是我的修复方法。 您的项目需要以下npm包： -下降区 -进出口银行 -blueimp加载映像

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

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

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

---

这里6和8的方向是错误的，6应该是90，8应该是-90。将所有代码放在drawImageIOSFix中比在函数之间拆分更简单。遗憾的是，我的编辑修复和整理被拒绝，尽管它根本没有改变答案的意图。如果有人不能编辑怎么办他创建了Dropzone.JS文件。就像我在使用NodeJS系统一样。有什么想法吗？这不再有效，因为函数“EXIF”没有定义。

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

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