Clipped Size larger then image

[girls-whocode]

I have done several tests, and it seems that I am either not understanding something, or there is something wrong. Here is what is going on.

    previewImage: function(output) {
      this.imageCanvas = output
      this.animalImage = this.imageCanvas.dataUrl
      console.log('animalImage Size =>', this.animalImage.length)
      this.hasImageClipped = false
    },

    setImage: function() {
      this.clippedImage = this.$refs.clipper.clip().toDataURL("image/jpg", 1)
      console.log('clippedImage Size =>', this.clippedImage.length)
      this.resultURL = this.clippedImage
      this.hasImageClipped = true
      this.hasImage = true
      console.log(this.$refs.clipper)
    }

<clipper-fixed ref="clipper" :src="animalImage" class="animalImage float-left mr-3" />

<image-uploader :class-name="['fileinput', { 'fileinput--loaded': hasImage }]" capture="environment" :debug="0" do-not-resize="['gif', 'svg']" :max-width="260" :quality="0.85" :preview="false" :auto-rotate="true" output-format="verbose" @input="previewImage">
    <label slot="upload-label" for="fileInput" class="btn btn-primary btn-sm" style='width: 260px;'>
        <b-img :src="renderImage(imageData.image_upload_icon)" />
        <span class="upload-caption">
           {{ hasImage ? "Replace" : "Upload" }} Image
        </span>
    </label>
</image-uploader>

<b-button variant="info" class="ml-3" @click.prevent="setImage">Clip Image</b-button>

The uploaded image after compression and adjusting the max-width to 260px, becomes:
animalImage Size => 8067

The image after the clip button is pressed:
clippedImage Size => 73294

Am I missing something on the preview versus set image functions?

[timtnleeProject]

Hi @jessicakennedy1028,
I think this.animalImage.length is the length of the data URL string, not sure whether it's related to the image's size.
Maybe you could compare the canvas size by using canvas.width and canvas.height.

[girls-whocode]

Thank you for your answer, let me add some more information... The actual image size: 30.8K actual image width: 729px height: 486px

Uploaded image (animalImage width): 260px (animalImage height): 173px DataURL size: 8067
Clipped image (clippedImage width): 156px (clippedImage height): 156px DataURL size: 73294

I also have the dataURL's for both sets. The first one has 7980 cols of string and the second one has 72173 cols of string

This is similar to my findings with the .length method. I would be happy to give you access to the entire project so you can see the entire setup if you need. I could also allow you to SSH into my local PC so you can access it with your own tools (Visual Studio, etc)

[timtnleeProject]

@jessicakennedy1028 I made a reproduce here are repository and demo, if you want to run this example at local you need to use something like serve to serve these static files in order to clip the same-origin image.

As you can see if you clip area within the image, the result size is smaller than the original images size.

However if your clipping area is larger then the image, the result image size will larger then the original image size.

This is because I want to remain the resolution of the original image.
For example, there's an image 500x500 px, you clip half of the image with ratio 1, the result becomes 250x250 px.
But if you clip like two times larger then the image the result becomes 1000x1000 px.

I think instead of compress images during upload, maybe try to compress them after clipping?

[timtnleeProject]

Use maxWPixel: 500

https://github.com/timtnleeProject/vuejs-clipper/wiki/Resulting-canvas-size