I resize a very big image (12288 × 12288) to a small image (512x512) with this library.

I have big image quality issues while resizing, how to fix this quality problem ?
Thanks a lot for your help !

My code

const zoomRoot = bigSquareImageClone
        .resize({ 'width': 512, 'height': 512 });

Original (screenshot un-zoomed)

Resized: Screenshot 100%

Trying to resize a gift

const ImgBase64_ = resizeImage.resize(
image,
resizeWidth,
resizeHeight,
resizeImage.GIF
);

But it always return it as a PNG

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA54AAALKCAYAAABa546yAAAgAElEQVR4Xuy9a7hdRZUuPHZCyEVI9sqdhGAISQiEEISDwNPcoTFG8ALd3kA5Cm1rd3ts2+4Gn+9H43ee8zXY2mp7OdqKtkoUtQUVjAFBA6jcREggBJIQENghN7J2QsiFkOzvGVVrzDlqzDGqaq69dgKY+SNZe866zZpVNeud7xjv6PpQ4wd9zUYXNJp9gAf9xv.........

Hi, first of all, thank you for this package 👍

What is actually happening?

Let's say, I have an image of 1600x900 px and I want to resize it down to 800xHeight px. I'm trying to do it with next code:

resize2Canvas(canvas, 800)

but in result I have an image with Widthx800 px 😸 because of this math

  function resize2Canvas(img, width, height) {
    // ...
    height = height || width;
    // 按原图缩放
    var detImg = img.width / img.height;
    if (width / height > detImg) {
      height = width / detImg;
    } else {
      width = height * detImg;
    }

https://jsfiddle.net/1p0z3qbm/

What is expected?

I expect that my new image should have width=800. Something like this:

function getNewImageDimentions (canvas, width, height) {
  if (width && height) {
    return [width, height]
  } else if (width) {
    return [width, width * canvas.height / canvas.width]
  } else if (height) {
    return [canvas.width * height / canvas.height, height]
  } else {
    return [canvas.width, canvas.height]
  }
}

// Force dimentions
console.log(getNewImageDimentions({
	width: 1600,
  height: 900
}, 800, 600)) // -> [800, 600]

// Auto height
console.log(getNewImageDimentions({
	width: 1600,
  height: 900
}, 800)) // -> [800, auto]

// Auto width
console.log(getNewImageDimentions({
	width: 1600,
  height: 900
}, null, 600)) // -> [auto, 600]

// No args? Just returns original dimentions
console.log(getNewImageDimentions({
	width: 1600,
  height: 900
})) // [1600, 900]

https://jsfiddle.net/1p0z3qbm/6/

Helpful links

• Ratios & proportions

Code for image resize is
var img = "https://cdn-img.com/sites/default/abc.jpg";
var data = resizeImage.resize2Canvas(img, 200, 100);
console.log("data" + data);

And getting this error
ReferenceError: document is not defined
at Object.resize2Canvas (PROJECT FOLDER*******\node_modules\resize-image\index.js:51:27)
at Object. (D:\work\gitlab\route\image-scrape.js:52:26)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (D:\work\gitlab\server.js:32:9)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:393:7)
at startup (bootstrap_node.js:150:9)
at bootstrap_node.js:508:3