I want to add fengyuanchen/cropperjs to an image element, but when the page loads I get this error in console TypeError: Error resolving module specifier: cropperjs
.
I am using CDN links for js and css provided on the official github page https://github.com/fengyuanchen/cropperjs
I have tried following the "Getting started" on the github page. I added CDN links, created a div with an image of an id uploaded-img
, and then at the bottom of the page I added a script tag with the supplied code from the page
<script>
import Cropper from 'cropperjs';
const image = document.getElementById('uploaded-img');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
console.log(event.detail.scaleX);
console.log(event.detail.scaleY);
},
});
</script>
I have googled this and found other people having troubles with importing, and the recommended solutions were to substitute import Cropper from 'cropperjs';
with either import Cropper from 'cropperjs/dist/cropper.esm.js';
or to create a var and to require it like that. Also someone suggested that I should use "./cropperjs"
or "../cropperjs"
. But none of the above variations worked.
What am I doing wrong?
So I have managed to get this working by downloading the cropper.js instead of using the CDN link, and also by copy-pasting the example modals that can be found on the official github page (https://github.com/fengyuanchen/cropperjs/tree/master/examples) and modifying the code from there.