Jcrop

Aspect Ratio

  • X:
  • Y:
  • W:
  • H:

Aspect ratio example. Implements a single widget and a reset button that restores the original crop. The reset is accomplished by animating the crop widget back to the original coordinates.

  • Only one crop widget is allowed
  • Custom handles array is passed, only corner handles
  • Initial coordinates are set and crop widget is created
  • aspectRatio is set/locked to original crop dimensions
  • Reset button implements animate() method, moves back to original coordinates

Source code

<template>
  <div>
    <Jcrop
      src="https://d3o1694hluedf9.cloudfront.net/sierra-750.jpg"
      @update="pos = $event.sel.round()"
      :rect="rect"
      :options="options"
    />
    <coords :rect="pos"/>
    <button @click="originalCrop()">Reset</button>
  </div>
</template>

<script>
  const origin = [150,160,540,270];

  export default {
    data: () => ({
      rect: origin.slice(0),
      options: {
        handles: ['sw','nw','ne','se'],
        aspectRatio: origin[2]/origin[3]
      },
      pos: {}
    }),
    methods: {
      getOrigin() { return origin.slice(0); },
      originalCrop() { this.rect = this.getOrigin(); }
    }
  }
</script>

← Custom Widget →