Store image to server with fixed dimensions

[ricardomarsanc]

Hello,

I am trying to use the vue-advanced-cropper to crop an image in my Vue frontend and then store it in the server-side once cropped. My requirement is to store the image in the server with dimensions of exactly 600x400px each one, I am using the stencilSize property to set the stencil size to width="600" and height="400", but when storing the images on the server-side, the dimensions of the images are not the same of the stencil, dimensions are different for each image I use.

Is there any way to adjust the cropper and get always a image with the same dimensions?

Here is the code for my cropper

<cropper
            class="cropper-background"
            :src="img"
            ref="cropper"
            @change="change"
            :stencil-props="{
              handlers: {},
              movable: false,
              scalable: false,
            }"
            :stencil-size="{
              width: 600,
              height: 400,
            }"
            image-restriction="stencil"
          />

and the script function to store the image in the server

methods: {
//...
submit() {
      const { canvas } = this.$refs.cropper.getResult();
      if (canvas) {
        const form = new FormData();
        canvas.toBlob(
          (blob) => {
            console.log("blob: ", blob);
            form.append("picture", blob);
            axios
              .create({ withCredentials: true })
              .post("/uploadmultiple", form, {
                headers: { crossdomain: true, "Content-Type": "undefined" },
              })
              .then((res) => {
                this.sendFilesToParent(res.data.files);
              })
              .catch((err) => {
                console.log("ERR: " + err.response.data.error);
                this.$store.dispatch("addNotification", {
                  message: err.response.data.error,
                  color: "error",
                });
              });
          } /*Second parameter can be used here to specify file forma e.g. "image/jpeg". Default: png*/);
      }
    },
    sendFilesToParent(imgArray) {
      this.$emit("croppedimages", imgArray);
    }, 
//...

Hope you can help me. Thank you very much!

[Norserium]

Hello, @msriki12!

The stencil-size prop sets the stencil size limitations (i.e. size of component that displays the cropped area), not the size of a cropped area.

I assume you can implement the desired result by the setting of the width and height restrictions.

[Norserium]

@msriki12, any news?

[ricardomarsanc]

Sorry I didn't have time to try it out. I will keep you up to date! Thank you very much!

[Norserium]

@msriki12, any news?

[ricardomarsanc]

Update: Thanks for the help, now I have my images cropped with the required size, but I have one last doubt.

When I upload an image which is smaller than the minimum size of the cropper, there are some problems. In my case I have set the stencil-size property also fixed to the size of the image I want to crop, and in this case if the image for example is higher enough but the width is less than the minimum, the stencil fills the stored image with a transparent background. It is okay for me, but the problem is that the stencil only can be adjusted to have the image at the start or the end of the stencil, I would like to center the image in the stencil. On the other hand, I don't know if there is a way to prevent users to upload images that are smaller than the minimum size of the stencil, it could be another solution. I will attach the code of my cropper and a screenshot to clarify.

<cropper
  :min-width="600"
  :min-height="400"
  :max-width="600"
  :max-height="400"
  class="cropper-background"
  :src="img"
  ref="cropper"
  @change="change"
  :stencil-props="{
       handlers: {},
       scalable: false,
  }"
  :stencil-size="{
        width: 600,
        height: 400,
  }"
/>

The screenshot can be found in this link: https://drive.google.com/uc?id=1vf1E0kn6AGD7F6RZuIuQfLkdFfThfPgh

Thank you very much!

Best regards.

[Norserium]

@msriki12, alas, there is obviously a some sort of bug. I will try to eliminate it during this week.

[Norserium]

@msriki12, nope, the mentioned bug should not affect your case. I assume you should remove this lines, and it will be okay:

  :stencil-size="{
        width: 600,
        height: 400,
  }"

[ricardomarsanc]

Thank you very much for your response. I had to make some research but with your help I finally have something working well. I will close the issue.

Thank you again!

[Norserium]

You are welcome!