FileReader,

I have published a case study hahaOCR on the Google Chrome Web Store. This extension can help users to recognize the text information in the image and display it as text. You can find my application in the Chrome Web Store, as shown in the picture:

This extension allows users to upload pictures through the file upload button, please see the demo:

Next, we will elaborate on the file (image) processing module involved in this case in this article.

The resources

1. MDN Web Docs: developer.mozilla.org/zh-CN/docs/…

1. FileReader overview

This object allows a Web application to asynchronously read the contents of a File (or raw data buffer) stored on the user’s computer, using a File or Blob object to specify which File or data to read. The File object can be a FileList object returned by the user after selecting a File on an element, or a DataTransfer object generated by a drag-and-drop operation. It can also be the result of mozGetAsFile() on an HTMLCanvasElement. A Blob object represents an immutable, raw, data-like File object whose data can be read in text or binary format or converted to ReadableStream for data manipulation. Blobs do not necessarily represent data in JavaScript’s native format. The File interface is based on BLObs. Inherits the functionality of Blob and extends it to support files on user systems.

2. FileReader properties

To illustrate the three properties of FileReader more visually, let’s look at a simple piece of code:

<input type="file" id="file" onchange="readFile(this.files[0])">
Copy the code

window.readFile = (file) = > {
   console.log(file)
   console.log(file.type)
   var reader = new FileReader()
   console.log(reader)
}
Copy the code

In the above code, we define a file upload button. We only process the first file that the user uploads. After the user has uploaded the file, we look at the console output:

We specify three consoles in the code above. The first console outputs information about the files uploaded by the user. The second console outputs the type of the file the user uploaded. The third console outputs information about the FileReader instance.

• Filereader.error (read-only property)

This property represents an error that occurred while reading the file, and the error value shown in Figure 1 is NULL, indicating that there was no error when reading the file uploaded by the user.

• FileReader. ReadyState (read-only property)

This property represents the number of FileReader status.

Figure 1 shows a readyState value of 0 because we did not load any data, and although we finished uploading the image, we did not specify any method to read the image file.

• Filereader.result (read-only property)

The format of the data depends on which method is used to initiate the read operation. In Figure 1, the result value is null because we do not specify a method to read the currently uploaded file. Next, To read the image, use the filereader.readasDataURL () method:

window.readFile = (file) = > {
  var reader = new FileReader()
  console.log(reader)
  reader.readAsDataURL(file)
  reader.onload = (res) = > {
      console.log(res)
  }
}
Copy the code

Please look at the console information:

In the above code, we read the image file uploaded by the user through the filereader.readDataasURL () method. When the reading is completed, the result property will contain a Base64 string in data:URL format to represent the content of the file read. For more information on how to read files uploaded by users, see section 3.

3. FileReader method

Next, let’s look at some methods of the FileReader interface:

As shown in the table above, we can take different methods to complete the reading operation for different files. Next, we passFileReader.readAsText()Method to read a text, look at the code:

window.readFile = (file) = > {
   var reader = new FileReader()
   console.log(reader)
   reader.readAsText(file)
   reader.onload = (res) = > {
       console.log(res)
   }
}
Copy the code

Please look at the demo:

4. FileReader events

Let’s continue with the FileReader interface’s event handling methods:

As shown in the table above, we can specify different processing logic at different stages of the user’s file upload, see the code:

<div class="example">

    <div class="file-select">
        <label for="avatar">Choose a profile picture:</label>
        <input type="file"
               id="avatar" name="avatar"
               accept="image/png, image/jpeg">
    </div>

    <img src="" class="preview" height="200" alt="Image preview...">

    <div class="event-log">
        <label>Event log:</label>
        <textarea readonly class="event-log-contents" rows="20" cols="50"></textarea>
    </div>

</div>
Copy the code

In the code above, we define a file upload button, specifically an image upload button; We then define a tag with an empty SRC attribute; Finally, we define a text input box to display information about image files read by different event handlers.

const fileInput = document.querySelector('input[type="file"]');
const preview = document.querySelector('img.preview');
const eventLog = document.querySelector('.event-log-contents');
const reader = new FileReader();

function handleEvent(event) {
    console.log(event)
    eventLog.textContent = eventLog.textContent + `${event.type}: ${event.loaded} bytes transferred\n`;

    if (event.type === "load") { preview.src = reader.result; }}function addListeners(reader) {
    reader.addEventListener('loadstart', handleEvent);
    reader.addEventListener('load', handleEvent);
    reader.addEventListener('loadend', handleEvent);
    reader.addEventListener('progress', handleEvent);
    reader.addEventListener('error', handleEvent);
    reader.addEventListener('abort', handleEvent);
}

function handleSelected(e) {
    eventLog.textContent = ' ';
    const selectedFile = fileInput.files[0];
    if (selectedFile) {
        addListeners(reader);
        reader.readAsDataURL(selectedFile);
    }
}

fileInput.addEventListener('change', handleSelected);
Copy the code

In the above code, we only process the first image file uploaded by the user (throughreadAsDataURLMethod read); We also passedEventTarget.addEventListenerMethod will beFileReaderThe specified six listeners (event handlers) are registered toreaderOn; And finally when triggeredloadEvent is read after success, i.edata:URLThe format ofBase64The string is assigned to null<img/>Of the labelsrcProperty, and finally displayed on the page, see the demo:

5. Case study

Finally, let’s take a look at the file processing module in the hahaOCR case mentioned at the beginning of this article. The idea of implementing this logic is actually very simple: The user uploads the image by button or drag operation, and after successful uploading, the interface is called to display the text information in the image in . Next, let’s look at the code to achieve this function:

// Select the file manually
$('#input').change(function() {
    event.preventDefault();
    var filesToUpload = document.getElementById('input').files;
    var img_file = [];
    for (var i = 0; i < filesToUpload.length; i++) {
        var file = filesToUpload[i];
        if (/image\/\w+/.test(file.type) && file ! ="undefined") { img_file.push(file); }}var reader = new FileReader();
    var AllowImgFileSize = 2100000; // The maximum number of images to be uploaded (in bytes) (2M = 2097152 B) Exceeds 2M
    var imgUrlBase64;
    if (img_file) {
        // Read the file into the page as a Data URL
        imgUrlBase64 = reader.readAsDataURL(file);
        reader.onload = function (e) {
            if(AllowImgFileSize ! =0 && AllowImgFileSize < reader.result.length) {
                alert( 'Upload failed, please upload pictures not larger than 2M! ');
                return;
            }else{
                $.ajax({
                    type: 'post'.url: '* * *'.// Here is the data request interface
                    dataType: 'json'.data: {
                        "showapi_appid": '* * *'.// You need to change this to your own appID
                        "showapi_sign": '* * *'.// You need to change the secret of your application
                        "base64":reader.result,
                    },
                    error: function(XmlHttpRequest, textStatus, errorThrown) {
                        alert("Operation failed!");
                    },
                    success: function(result) {
                        var res = result.showapi_res_body.texts[0];
                        console.log(res)
                        $("#exampleFormControlTextarea1").val(res)
                    }
                });
            }
        }
    }
    hahaOCR.prototype.getImageFile(img_file, filesToUpload.length);
});
Copy the code

In the above code, we limit the size of the image file uploaded by the user, and call the interface to identify the uploaded image file when the file is successfully uploaded. After the recognition is successful, the text information in the image will be displayed in .

6. At the end of the article

That’s all for this article. Did you learn? Go and practice it! Check out more of my open source works for more details:

1. Wechat official account (hahaCoder)

2. Wechat Small program (hahaAI)

3. Github: github.com/TURBO1002