site-map image adjust

by JThomas

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
<input type="file" onchange="loadImage(this.files)" />

<div id="canvas" style="width: 100vw; height: 70vh;">
</div>

<button onclick="result()">
Result
</button>

JavaScript

window.loadImage = function(files) {
  croppie.bind({
    url: URL.createObjectURL(files[0])
  })
}

var croppie = new Croppie(document.querySelector("#canvas"), {
  viewport: {
    width: 300,
    height: 300
  },
  enforceBoundry: false,
  showZoomer: true,
  enableResize: true,
  enableOrientation: true,
  mouseWheelZoom: false
});



window.result = function() {
  croppie.result({
    type: 'blob',
    size: {
      width: 3000,
      height: undefined,
    },
    format: 'jpeg',
    quality: 0.8,
    circle: false
  }).then(function(data) {
    console.log(data);
    //TODO: Upload to server and move to next step
  })
}