DropZoneJS + JavascriptLoadImage:旋转图像?

问题描述 投票:3回答:4

我正在尝试将DropZoneJS(找到 here)和JavascriptLoadImage(找到here)结合起来创建一个解决方案,用户可以拖放文件进行上传,并根据图像中的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

canvas html5-canvas dropzone.js
4个回答
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 to drawImageIOSFix(orientation,ctx
  • 在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;

2
投票

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

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

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


2
投票

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

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

我不知道它为什么会起作用,但似乎Dropzone只是“注意到”它。在构建了一个更复杂的解决方案来实现同样的目标后,我意识到了

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


0
投票

我也发现dropzone不能正确旋转缩略图。这是我的修复。您的项目需要这些npm包: - dropzone - 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);
        },
© www.soinside.com 2019 - 2024. All rights reserved.