viliusle / hermite-resize Goto Github PK

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?

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

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.

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 ?

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?

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/

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.

 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)

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...

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?

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

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.