"InvalidImageSize", "message": "Image size is too small."

Question

Trying to use Microsoft's Face API in Node.js but I am not able to load local images. What am I doing wrong? Thanks

I'm interfacing with a webcam and drawing the video out onto a canvas tag.

var canvas = document.getElementById("myCanvas"); // get the canvas from the page
var ctx = canvas.getContext("2d");

I have checked that I am getting an image using

var filename = new Date();
var imgData = canvas.toDataURL('image/jpeg');
var link = document.getElementById('saveImg');
link.href = imgData;
link.download = filename;
link.click();

and the image is saved fine...but I then try to do the following:

sendRequest(makeblob(imgData));

function sendRequest(imageURL) {
  var returnData;
  const request = require('request');
  const subscriptionKey = '...';

  const uriBase = 'https://eastus.api.cognitive.microsoft.com/face/v1.0/detect';

  // Request parameters.
  const params = {
    'returnFaceId': 'true',
    'returnFaceLandmarks': 'false',
    'returnFaceAttributes': ''
  };

  const options = {
    uri: uriBase,
    qs: params,
    body: '"' + imageURL + '"',
    headers: {
      'Content-Type': 'application/octet-stream',
      'Ocp-Apim-Subscription-Key': subscriptionKey
    }
  };

  request.post(options, (error, response, body) => {
    if (error) {
      console.log('Error: ', error);
      return;
    }
    let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
    returnData = jsonResponse;
  });
  return returnData;
}

makeblob = function (dataURL) {
        var BASE64_MARKER = ';base64,';
        if (dataURL.indexOf(BASE64_MARKER) == -1) {
            var parts = dataURL.split(',');
            var contentType = parts[0].split(':')[1];
            var raw = decodeURIComponent(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 });
    }

And this simply returns

{
  "error": {
    "code": "InvalidImageSize",
    "message": "Image size is too small."
  }
}

How else am I supposed to de/encode the image?

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

“InvalidImageSize”, “message”: “Image size is too small.”

According to Face API - V1.0, we could know that Faces are detectable when its size is 36x36 to 4096x4096 pixels. If need to detect very small but clear faces, please try to enlarge the input image. If your image with clear faces, you could enlarge the local image with online tool.

Higher face image quality means better detection and recognition precision. Please consider high-quality faces: frontal, clear, and face size is 200x200 pixels (100 pixels between eyes) or bigger.

JPEG, PNG, GIF (the first frame), and BMP format are supported. The allowed image file size is from 1KB to 6MB.

Faces are detectable when its size is 36x36 to 4096x4096 pixels. If need to detect very small but clear faces, please try to enlarge the input image.

score 0 · Answer 2 · answered Jul 10 '19 at 17:37

I know I am late here, but I have find something which surely helps you. Sadly, the Emotion and Face APIs do not support chunked transfers, as noted here. The 'workaround' is to load the image bits synchronously prior to making the web request. The code snippet for that should be like this:

const request = require('request');
const fs = require('fs');

function sendRequest(imageData) {
    const uriBase = 'https://eastus.api.cognitive.microsoft.com/face/v1.0/detect';

    // Request parameters.
    const params = {
        'returnFaceId': 'true',
        'returnFaceLandmarks': 'false',
        'returnFaceAttributes': ''
    };

    const options = {
        uri: uriBase,
        qs: params,
        body: fs.readFileSync(imgData),
        headers: {
          'Content-Type': 'application/octet-stream',
          'Ocp-Apim-Subscription-Key': subscriptionKey
        }
    };

    request.post(options, (error, response, body) => {
      if (error) {
        console.log('Error: ', error);
        return;
      }
      let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
      returnData = jsonResponse;
    });
    return returnData;
}

"InvalidImageSize", "message": "Image size is too small."

2 Answers2

Linked