giacomocerquone / react-perspective-cropper

React component performing border detection, perspective correction and simple image filters over a provided image 📲 📸
MIT License
44 stars 21 forks source link

Change return type and quality #9

Open DanielBailey-web opened 3 years ago

DanielBailey-web commented 3 years ago

It would be nice to be able to declare a return mime-type for the image instead of just using the mime-type from the original image.

locally I am currently doing something like this (modified from the example)

const doSomething = async () => {
    try {
      const res = (await cropperRef?.current?.done({
        preview: true,
        filterCvParams: {
          grayScale: false,
          th: false,
        },
        image: {
          quality: 0.8,
          type: "image/jpeg",
        },
      })) as Blob;

      updateBlobState(res);
      setFileChanged(true);
    } catch (e) {
      console.log("error", e);
    }
  };

And then in Canvas.js using extended options.

canvasRef.current.toBlob(
          (blob) => {
            blob.name = image.name;
            resolve(blob);
            setLoading(false);
          },
          opts.image.type || image.type,
          opts.image.quality || 1
        );

I can submit a pull request if this is something you would be interested in adding to the library. I believe the way I did it would implement it in a non-breaking way, given the OR operations to provide defaults.

DanielBailey-web commented 3 years ago

I guess the question should really be: Should these be input options to the "done" function, or should the ref to the canvas be able to be accessed. I see this way working fine (and like I mentioned it seems to be a non-breaking change), but other utilities like react-cropper just give people access to the canvas ref which certainly has more utility.