reactjsamazon-web-servicesamazon-rekognition

AWS Rekognition JS SDK Invalid image encoding error

Building a simple AWS Rekognition demo with React, using <input type="file">

Getting Invalid image encoding error.

let file = e.target.files[0];
let reader = new FileReader();

reader.readAsDataURL(file);

reader.onloadend = () => {
  let rekognition = new aws.Rekognition();

  var params = {
    Image: { /* required */
      Bytes: reader.result,
    },
    MaxLabels: 0,
    MinConfidence: 0.0
  };

  rekognition.detectLabels(params, function(err, data) {
    if (err) console.log(err, err.stack); // an error occurred
    else     console.log(data);           // successful response
  });

enter image description here

GitHub repo: https://github.com/html5cat/vision-test/

GitHub Issue: https://github.com/html5cat/vision-test/issues/1

Solution

  • You can try converting the reader.result into binary bytes.

    function getBinary(encodedFile) {
        var base64Image = encodedFile.split("data:image/jpeg;base64,")[1];
        var binaryImg = atob(base64Image);
        var length = binaryImg.length;
        var ab = new ArrayBuffer(length);
        var ua = new Uint8Array(ab);
        for (var i = 0; i < length; i++) {
          ua[i] = binaryImg.charCodeAt(i);
        }

        var blob = new Blob([ab], {
          type: "image/jpeg"
        });

        return ab;
      }

    You can essentially set the response of the above method for Bytes:

     Bytes: getBinary(reader.result),