javascript - Canvas 图像解析方向不正确

我有图像上传器，它使用画布并尝试使用load-image.all.min.js获取方向。但是，当我选择多个图像方向解析功能时，不能一一保存数据。

这意味着如果我选择1张图片。它使用正确的ori变量将数据传输到'upload_canvas.php？ori ='+ ori。

但是当我选择多张图片上传示例3张图片时（方向1、1、8）
它将数据传递到服务器upload_canvas.php？ori = 8，upload_canvas.php？ori = 8，upload_canvas.php？ori = 8。仅最后一个ori变量。

在将图像数据一张一张地上传到服务器之前，可能已经循环了方向解析功能。

如何将正确方向的图像传输到服务器？

下面我的使用代码。

document.querySelector('form input[type=file]').addEventListener('change', function(event){ // Read files var files = event.target.files; var ori = 1; ojit_pre

最佳答案

您的变量ori是全局变量，在所有图像之间共享。 .onload函数中的代码不会立即运行，而是仅在您的for（）循环遍历所有图像之后运行。此时，ori将包含最后一张图像的方向。

要解决此问题，请将变量和parseMetaData移到reader.onload函数中。

...
var reader = new FileReader();
    reader.onload = function (readerEvent) {

        var ori;

        loadImage.parseMetaData(files[i], ...)

        var image = new Image();
        image.onload = function (imageEvent) {
...

警告：未经测试！