0

在我的网站上，用户可以上传照片，我使用 Cloudinary 在线存储它们。在将它们发送到 Cloudinary 的服务器之前，我会拍摄每张照片并缩小它们的大小，以便快速完成向 Cloudinary 的传输。

我注意到当照片通过 iphone（.heic 格式）上传时，用户的第一张照片被一张黑色照片取代。

我不明白为什么这只出现在 iPhone 上，我不明白为什么只有第一张照片变成黑色。

这是我的 javascript 代码来减小照片的大小：

function resizePhotos () {
  let opti_photos = [];
  let file0 = document.getElementById('photo-input0').files[0];
  let file1 = document.getElementById('photo-input1').files[0];
  let file2 = document.getElementById('photo-input2').files[0];
  let file3 = document.getElementById('photo-input3').files[0];
  let file4 = document.getElementById('photo-input4').files[0];
  let file5 = document.getElementById('photo-input5').files[0];
  let file = [file0, file1, file2, file3, file4, file5];
  let file6 = document.getElementById('photo-input6').files[0];
  if (file6) {
    file.push(file6);
  }
  let file7 = document.getElementById('photo-input7').files[0];
  if (file7) {
    file.push(file7);
  }

  for (let i = 0; i < file.length; i++) {
    if (file[i].type.match(/image.*/)) {
      console.log('An image has been loaded');
      // Load the image
      var reader = new FileReader();
      reader.onload = function (readerEvent) {
        var image = new Image();
        image.onload = function (imageEvent) {
          // Resize the image
          var canvas = document.createElement('canvas'),
            max_size = 1000,
            width = image.width,
            height = image.height;
          if (width > height) {
            if (width > max_size) {
              height *= max_size / width;
              width = max_size;
            }
          } else {
            if (height > max_size) {
              width *= max_size / height;
              height = max_size;
            }
          }
          canvas.width = width;
          canvas.height = height;
          canvas.getContext('2d').drawImage(image, 0, 0, width, height);
          var dataUrl = canvas.toDataURL('image/jpeg');
          var resizedImage = dataURLToBlob(dataUrl);
          console.log('go trigger event');
          $.event.trigger({
              type: "resizeImg",
              blob: resizedImage,
              url: dataUrl
          });
        }
          image.src = readerEvent.target.result;
      }
      reader.readAsDataURL(file[i]);
    }
  }


  var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
      var parts = dataURL.split(',');
      var contentType = parts[0].split(':')[1];
      var raw = parts[1];
      return new Blob([raw], {type: contentType});
    }
    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;
    var uInt8Array = new Uint8Array(rawLength);
    for (var i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
  }

  $(document).on("resizeImg", function (event) {
    event.preventDefault();
    console.log("Uploaded the photo and pushed to opti photos ");
    if (event.blob && event.url) {
      opti_photos.push(event.blob);
    }
    -> (RUBY ON RAILS) AFTER I JUSTE SEND ALL THE PHOTOS TO MY CONTROLLER TO CREATE A NEW 
       OBJECT
  });
}

如果有人有线索，那就太棒了！

谢谢 ：）

4

0 回答 0