CODEWITHSUNDEEP
javascripthtmlcssnode.jscropperjs
Victor Vector
Victor Vector

Reputation: 31

Cropper.js - The first argument is required and must be an <img> or <canvas> element

I'm totally new to JS and I'm trying to use Cropper.js. I couldn't run the given example on README either. This is the code that I'm trying to run:

//import Cropper from 'cropperjs';

let image = document.getElementById('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);
  },
});
img {

    display: block;
    max-width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <link rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="test.png"/>
        </div>
    </body>
</html>

If I uncomment the import statement, in console it shows : Cannot use import statement outside a module. I did search here for this problem but couldn't find anything that fixes my problem.

Upvotes: 2

Views: 6402

Answers (5)

Manojkumar Muthukumar
Manojkumar Muthukumar

Reputation: 323

Try this out. It may happen because it can't find the particular time. when component loads

setTimeout(() => {
  const cropper = new Cropper(
    <HTMLCanvasElement>document.getElementById("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);
      }
    }
  );
}, 1000);

Upvotes: 0

mohammad akbarzadeh
mohammad akbarzadeh

Reputation: 31

Use image[0] as the first input argument of Cropper class and it can solve your problem.

const cropper = new Cropper(image[0], {
 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);
 },
});

Upvotes: 3

takoro
takoro

Reputation: 1

/* import Cropper from 'cropperjs';
 */
let image = document.getElementById('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);
  },
});
img {

    display: block;
    ma%;
<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="https://patadev.s3.eu-west-2.amazonaws.com//profile/1576322838400hdiqdcjlxs.png"/>
        </div>
    </body>
</html>

Upvotes: 0

Victor Vector
Victor Vector

Reputation: 31

I figured it out - the problem was such that the JavaScript file was getting loaded before the DOM is fully loaded. Hence, reference 'img' kept failing since it was requested before the actual image was loaded. Also, I thank Sarfraaz for pointing out about references.

FIX : 

<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <link rel="stylesheet" href="style.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="test.png"/>
        </div>
        <script type="text/javascript" src="test.js"></script>
    </body>
</html>

Upvotes: 1

Sarfraaz
Sarfraaz

Reputation: 1269

Check this out, it works as expected, it might be the issue with the image you are trying to load

/* import Cropper from 'cropperjs';
 */
let image = document.getElementById('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);
  },
});
img {

    display: block;
    max-width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Cropper Test</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
    </head>
    <body>
        <div>
            <img id="img" src="https://patadev.s3.eu-west-2.amazonaws.com//profile/1576322838400hdiqdcjlxs.png"/>
        </div>
    </body>
</html>

Upvotes: 0

Related Questions