GithubHelp home page GithubHelp logo

Comments (3)

enkhtulga avatar enkhtulga commented on July 22, 2024

@svale

from vue-image-upload-resize.

svale avatar svale commented on July 22, 2024

Hi @enkhtulga. Thank you very much for your patience with my late reply!

There is an notification event triggered as soon as a file is read (@onUpload), but if you need any logic based on the file properties (like the aspect ratio), it seems you would need access to the file data itself.

So what I think what you could use is dimensions/aspec ratio output that lets test for criteria like this. Hope to include that in an update I'll publish this weekend.

from vue-image-upload-resize.

svale avatar svale commented on July 22, 2024

Ok, so with the latest update (2.1.0), you should be able to check the aspect ratio on your upload.
Basically something like this:

    <image-uploader
      :preview="false"
      outputFormat="verbose"
      @input="onUpload"
    >

Disable the built in preview, set output to verbose and handle the logic in a custom method:

  methods: {
    onUpload: function(image) {
      const aspectRatio = image.info.aspectRatio
      if (aspectRatio !== 1.33) { //4:3
        //abort
        this.upload = false
        alert('Error: Wrong aspect ratio')
      } else {
        // continue
        this.upload = image.dataUrl
      }
    },
  }

Check for any constraints with the info.aspectRatio property (or width/height) and go on from there.

Thank you for the input! Fell free to re-open of this doesn't work as expected.

from vue-image-upload-resize.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.