search

fengyuanchen / cropperjs

JavaScript image cropper.
https://fengyuanchen.github.io/cropperjs/
MIT License
13.15k stars 2.42k forks source link

Bare bones example code for CropperJS v2 #1127

Closed dmishins closed 10 months ago

dmishins commented 10 months ago

I am new to web development and am trying to use cropperJS v2 in a small project. I tried to follow the guide but can't seem to instantiate cropper. Here is the code I wrote for html

<html lang="en-US">
  <head>
    <script src="scripts/main.js" type="module"  defer></script>
  </head>

  <body>
      <img id="image" src="images/grid.png">
  </body>
</html>

and main.js

import {Cropper} from '../node_modules/cropperjs/dist/cropper.js';
const cropper = new Cropper('#image');

I seem to get an error importing Cropper - on firefox, I see "Uncaught SyntaxError: ambiguous indirect export: Cropper" and on chromium "Uncaught SyntaxError: The requested module '../node_modules/cropperjs/dist/cropper.js' does not provide an export named 'Cropper'".

What am I doing wrong here? Is it possible to add a simple bare-bones example code using cropperjs2 in a website? Thank you so much, Daniel

dmishins commented 10 months ago

I (partially) resolved my own issue. I believe this pertains to the way javascript modules are imported. The cropper.js file uses something that I don't quite understand called UMD. In principle, from what I've read, this should be possible to import directly, but I couldn't figure out how to make it work. Instead, I switched to the cropper.esm.js file, which worked immediately.