Cropper.js - 第一个参数是必需的，并且必须是 <img> 或 <canvas> 元素答案

【问题标题】：Cropper.js - The first argument is required and must be an <img> or <canvas> elementCropper.js - 第一个参数是必需的，并且必须是 <img> 或 <canvas> 元素
【发布时间】：2020-05-10 10:36:18
【问题描述】：

我对 JS 完全陌生，我正在尝试使用 Cropper.js。我也无法在 README 上运行给定的示例。这是我要运行的代码：

//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>

如果我取消注释导入语句，在控制台中会显示：无法在模块外使用导入语句。我确实在这里搜索过这个问题，但找不到任何可以解决我的问题的东西。

【问题讨论】：

标签： javascript html css node.js cropperjs

【解决方案1】：

试试这个。它可能会发生，因为它找不到特定的时间。组件加载时

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);

【讨论】：

【解决方案2】：

使用 image[0] 作为 Cropper 类的第一个输入参数，它可以解决您的问题。

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);
 },
});

【讨论】：

【解决方案3】：

/* 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>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

【解决方案4】：

我想通了——问题在于 JavaScript 文件在 DOM 完全加载之前就被加载了。因此，引用“img”一直失败，因为它是在加载实际图像之前被请求的。另外，感谢Sarfraaz 指出参考资料。

修复：

<!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>

【讨论】：

【解决方案5】：

检查一下，它按预期工作，这可能是您尝试加载的图像的问题

/* 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>

【讨论】：

我试过了，但还是不行。同样的错误仍然存在。
检查可运行的解决方案，我在这里更新并添加了完整的可运行代码
谢谢，看起来你和我的作品在这里以及 JSFiddle 上都有效。但我无法让它在我的浏览器上运行（尝试过 Chrome、Firefox 和 Edge）。我不断收到此错误。我使用的是 Windows 10。
这是我得到的：错误：第一个参数是必需的，并且必须是或
这主要是因为在您的 html 中找不到 ID 为 img 的图像。请检查并确保您得到正确的参考