Image cropper.
https://luna.liriliri.io/?path=/story/cropper
Add the following script and style to your page.
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-cropper/luna-cropper.css" />
<script src="//cdn.jsdelivr.net/npm/luna-cropper/luna-cropper.js"></script>You can also get it on npm.
npm install luna-cropper --saveimport 'luna-cropper/luna-cropper.css'
import LunaCropper from 'luna-cropper'const container = document.getElementById('container')
const cropper = new LunaCropper(container, {
image: 'https://res.liriliri.io/luna/wallpaper.jpg',
})
console.log(cropper.getData())- image(string): Image url.
- preview(HTMLElement): Preview dom container.
Get a canvas with cropped image drawn.
Get size, position data of image and crop box.
Resize crop box.