我正在尝试将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”对象。
谢谢...
-Ben
1 - 包括https://raw.githubusercontent.com/jseidelin/exif-js/master/exif.js
2 - 编辑dropzone.js
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;
}
});
dh = dh / vertSquashRatio;
ctx.translate( dx+dw/2, dy+dh/2 );
ctx.rotate(o*Math.PI/180);
dx = -dw/2;
dy = -dh/2;
首先,感谢您对加载图像库的建议,因为我正在寻找如何处理EXIF数据。
回答你的问题:如果你在谈论缩略图显示,你可以提供一个“接受”功能,它接收文件,并从dropzone本身提供一个完成功能,并根据需要显示缩略图。
我意识到你可能会要求使用加载图像库中的文件进行上传。如果是这种情况,我会尝试替换accept函数中的文件数据。加载图像库的作者有一个blob javascript的画布,可能会有所帮助:https://github.com/blueimp/JavaScript-Canvas-to-Blob
如果您使用的是最新的Dropzone(经过5.4.0测试),只要您在页面中包含exif.js库,它就会自动修复缩略图的方向:
我不知道它为什么会起作用,但似乎Dropzone只是“注意到”它。在构建了一个更复杂的解决方案来实现同样的目标后,我意识到了
请注意,这不会影响发送到服务器的文件,只会显示Dropzone显示的缩略图。我正在使用ImageMagick -auto-orient
来修复服务器上的上传文件。
我也发现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);
},