Question

我使用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;



// Iterate through files
for (var i = 0; i < files.length; i++) {

    // Ensure it's an image
    if (files[i].type.match(/image.*/)) {

    //Get image orienatation
    loadImage.parseMetaData(files[i], function (data) {         
        if (data.exif) {
            ori = data.exif.get('Orientation');
            console.log("ori: "+ori);       
            } else {ori = 1;}
        });

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

            var image = new Image();
            image.onload = function (imageEvent) {
                canvas.width = image.width;
                canvas.height = image.height;
                drawImageIOSFix(canvas.getContext('2d'),image, 0, 0, image.width, image.height, 0, 0, width, height);

                // Upload image
                var xhr = new XMLHttpRequest();
                if (xhr.upload) {

                    // Update progress
                    xhr.upload.addEventListener('progress', function(event) {
                        var percent = parseInt(event.loaded / event.total * 100);
                        progressElement.style.width = percent+'%';
                    }, false);

                    // File uploaded / failed
                    xhr.onreadystatechange = function(event) {
                        if (xhr.readyState == 4) {
                            if (xhr.status == 200) {
                               //some code
                            } else {
                                imageElement.parentNode.removeChild(imageElement);
                            }
                        }
                    }

            xhr.open('post', 'upload_canvas.php?t=' + Math.random()+'&ori='+ori, true);
            xhr.send(canvas.toDataURL('image/jpeg'));

                }

            }

            image.src = readerEvent.target.result;

        }

        reader.readAsDataURL(files[i]);
    }

}
// Clear files
event.target.value = '';});

// Iterate through files for (var i = 0; i < files.length; i++) { // Ensure it's an image if (files[i].type.match(/image.*/)) { //Get image orienatation loadImage.parseMetaData(files[i], function (data) { if (data.exif) { ori = data.exif.get('Orientation'); console.log("ori: "+ori); } else {ori = 1;} }); // Load image var reader = new FileReader(); reader.onload = function (readerEvent) { var image = new Image(); image.onload = function (imageEvent) { canvas.width = image.width; canvas.height = image.height; drawImageIOSFix(canvas.getContext('2d'),image, 0, 0, image.width, image.height, 0, 0, width, height); // Upload image var xhr = new XMLHttpRequest(); if (xhr.upload) { // Update progress xhr.upload.addEventListener('progress', function(event) { var percent = parseInt(event.loaded / event.total * 100); progressElement.style.width = percent+'%'; }, false); // File uploaded / failed xhr.onreadystatechange = function(event) { if (xhr.readyState == 4) { if (xhr.status == 200) { //some code } else { imageElement.parentNode.removeChild(imageElement); } } } xhr.open('post', 'upload_canvas.php?t=' + Math.random()+'&ori='+ori, true); xhr.send(canvas.toDataURL('image/jpeg')); } } image.src = readerEvent.target.result; } reader.readAsDataURL(files[i]); } } // Clear files event.target.value = '';});

Answer 1

您的变量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) {
...

警告：未经测试！

画布图像解析方向不是正确的顺序

1 个答案: