IndexSizeError when resizing from Blob

[BernardA]

I am attempting to resize images before uploading.

I realized that

HERMITE.resize_image();

expects an id, so I created an element and set img.src to be a Blob version of the inputted image.

To be clear, this creates an <img tag with src attributes that looks like this:

src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD......

But this throws the error on the resample method.

IndexSizeError: Index or size is negative or greater than the allowed amount

Hermite_class/this.resample hermite.npm.js:7:1103

I tried to resize from an actual element that I placed on the page and it worked fine, so this seems to be an issue with the Blob.

I verified that the image is actually displayed on the page as well.

This is a React app, so here's the code:

The HTML

      <form>
           <div>
                <input name="form[imgFile]" id="form_imgFile" type="file">
           </div>
           <div><ul></ul></div>
           <div>
                 <button type="submit" id="form_save" name="form[save]" disabled=""> Submit</button>
           </div>
      </form>

This checks the inputted file and assigns it to the state when the user selects the file.

handleFileSelected =  event => {
    this.setState({upload_errors: []});
    let file = event.target.files[0];
    let errors = [];
    if (!ACCEPTED_MIME_TYPES.includes(file.type)) {
        errors.push('Invalid file type. Only jpeg and png accepted');
    }
    if (file.size > UPLOAD_MAX_SIZE) {
        errors.push('File size is bigger than allowed( 2MB )');
    }
    this.setState({upload_errors: errors});
    if (errors.length === 0) {
        document.getElementById("form_save").disabled = false;
        this.setState({selectedFile: file})
    }
}

This to resize, then upload the file:

handleImageUploadFormSubmit = (event) => {
    event.preventDefault();
    this.setState({imageUploadResponse: {}});
    const formData = new FormData();
    const HERMITE = new Hermite_class();

    let reader = new FileReader();
    let image = document.createElement("img");

    reader.onload = (readerEvent) => {
        image.onload = () => { 
            console.log('image on load', image); 
        };
        image.src = readerEvent.target.result;
    };
    reader.readAsDataURL(this.state.selectedFile);

    image.setAttribute("id", "temp_img");
    // display while on development only
    document.getElementById("cc").appendChild(image);
    console.log('img_elem', image)

    HERMITE.resize_image('temp_img', 300, 200);
    .......
}

[viliusle]

It can be issues with blob. Sadly i will not be able to fix or write any code soon, so i suggest you to use temp canvas, not image+blob.

But i will test and fix blob issues later. (not soon)

[BernardA]

Thanks, I am in no particular hurry with this. I have a fallback solution in place. Let me know when you have a fix in place.