CODEWITHSUNDEEP
reactjsazurefile-uploadcomputer-visionocr
Sarahrb
Sarahrb

Reputation: 669

How to send a local image instead of URL to Computer Vision API using React

I would like to upload local image file and extract text from it. I followed the below link and it works as expected when I pass URL. https://learn.microsoft.com/en-us/azure/developer/javascript/tutorial/static-web-app/add-computer-vision-react-app

I managed to configure for local image and get the base64 encoded dataURL of the uploaded image. But when I pass base64 encoded dataURL to Computer Vision API , it says "Input data is not a valid image" (POST 400 status code). I am getting error in the line that is shown below: const analysis = await computerVisionClient.analyzeImage(urlToAnalyze, { visualFeatures });

The code I have included for handling local image:

 const handleChange = (e) => {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onloadend = function()
    {
        setFileSelected(reader.result) // this is the base64 encoded dataurl
    }
   reader.readAsDataURL(file);
}

In computerVision.js file, I have changed the 'contentType' in header as below.

 const computerVisionClient = new ComputerVisionClient(
    new ApiKeyCredentials({ inHeader: {'Ocp-Apim-Subscription-Key': key, 'Content-Type': 'application/octet-stream'} }), endpoint);

I tried replacing client.read() with readTextInStream() as per docs in computerVision.js (please refer above link), but still throws error.

May I know why I get the error "Input data is not a valid image" ? Thanks.

Upvotes: 0

Views: 1113

Answers (1)

Ram
Ram

Reputation: 2754

Here is the link for input requirements.

There is a brand new online portal provided by Microsoft https://preview.vision.azure.com/demo/OCR

The advantage is that it will directly list your available resources so you just have to pick the right one, then you test, and there are also some samples.

Upvotes: 1

Related Questions