viliusle / hermite-resize Goto Github PK

I am using Hermite-resize along with react-avatar-editor. After editing my image in react-avatar-editor, it returns the image to me as a free-standing HTMLCanvasElement (not in the DOM). Now when I try to resize the canvas using Hermite-resize, I am getting a blank image. Is this expected to work?

Here's the code that react-avatar-editor uses to give me a canvas (original code here):

getImage () {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')

    ...

    context.drawImage(image.resource, -cropRect.x, -cropRect.y)
    return canvas
}

After getting this canvas, here's how I am passing it to Hermite-resize:

const HERMITE = new Hermite_class();
HERMITE.resample(canvas, 1024, 1024);

Finally when I save this canvas to a file. I get a blank image in the file. Just as a check, if I don't pass the canvas through Hermite-resize, I get the expected image in the file (without resizing).

Thanks in advance for your help.

In current package.json file package is named Hermite-resize. Could you please change it to hermite-resize? This is the proposed behavior for npm packages:

Extract from https://docs.npmjs.com/getting-started/using-a-package.json#requirements

"name"
all lowercase

Moreover, some node/npm features like requiring package just won't work unless package name is all lowercase.

 html2canvas(document.getElementById('resfinal'), {
      allowTaint: true,
      useCORS: true,
    }).then(function (canvas) {
      HERMITE.resample(canvas, 1920, 1080)
      setReadyImage(canvas.toDataURL('image/jpeg', 0.9))
    })

By adding HERMITE is the returning Canvas blank ( without it , all the code works correctly)

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);
    .......
}

Hi
I have found a couple of bugs and created fixes for them.
I've created a pull request (#8), however do you have a preferred process?
Should I create the dist. versions as well, and if so, how can I go about building them?

Thanks,
Oisin

How can we crop multiple areas in one go by selecting all the areas and then clicking on a button to crop and download?

When I resample an 112x113 image to 40x40, I end up with half the image missing on my Mac (8 cores). Resampling the image using resample_simple produces the correct results.

Source image (112x113):

Incorrect result using resample(canvas, 40, 40, true):

Correct result using resample_single(canvas, 40, 40, true):

FWIW, doing a resample(canvas, 50, 50, true) on the same source images produces a correct result; as does resampling larger images to 40x40. Other resample values for this source images produce wrong results (e.g. 39x39, 32x32, etc.) Probably a rounding error somewhere in there...

Hi. First of all, thank you for your library - really nice thing we're using.
The only issue we've stumbled upon: downscaled images get worse quality compared to scaling them manually with some editor:
http://i.imgur.com/3aGzDeO.jpg - original image,
http://i.imgur.com/ttvCh77.jpg - scaled w/library,
http://i.imgur.com/tvljveN.jpg - scaled manually.
It's not a critical difference but could you please take a look? Many thanks in advance.

when I use this library, i got this Uncaught TypeError: on_finish is not a function error. Is there anything I can do with it to remove this error?

Hi,
lovely fast script with nice quality and with no artifacts or halos on transparent images.
Thanks for sharing.

I have an issue with ie10.

Resizer fails with a DataCloneError on line 152.

my_worker.postMessage(objData, [objData.source]);

For now i do a try-catch and inform user for unsupported browser like:

var resizer = new Hermite_class();

      	try {
            resizer.resample(testCanvas1, canvas.width, canvas.height, true, function () {
          	    // give canvas to user function
  		    options.callback(testCanvas1);
             });
        } catch (e) {
        	//Errors here
        	options.callback(false);
        }

Any other ideas ?

Dear Viliusle,

Could you be so kind to give your take on the following conundrum which involve using your image reduction method with DICOM pixeldata? Please see link:
https://stackoverflow.com/questions/54934214/image-scaling-in-javascript-and-html5-algorithm-for-pixeldata-results-in-coarse

Sincerely

The hermite resample function gets great results, unless you downsize the image too much. See the jsfiddle links below for a demonstration:

Works: http://jsfiddle.net/9g9Nv/51/
Mangles the image: http://jsfiddle.net/9g9Nv/92/

your npm is out of date.
can u update to this repo? thanks

and

block_height and offset_y
duplicate defined.
maybe can use eslint check code?