javascript - 在 svelte 中裁剪图像第一个参数是必需的，并且必须是 <img> 或 <canvas> 元素

Question

我正在努力让cropperjs 以 svelte 的方式工作。任何帮助将不胜感激。

svelte脚本如下

<script>
import Cropper from 'cropperjs';

const image = document.getElementById('image');

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>
<img id="image" src="./images/favicon.png" alt="">

错误是:

Uncaught Error: The first argument is required and must be an <img> or <canvas> element.
    at new Cropper (cropper.js:3229:15)
    at instance$1 (Example5.svelte:8:14)
    at init (index.mjs:1809:11)
    at new Example5 (Example5.svelte:17:36)
    at create_fragment (Example5.svelte:17:36)
    at init (index.mjs:1824:37)
    at new App (Example5.svelte:17:36)
    at main.js:3:13
    at main.js:7:2

Answer 1

使用 import Cropper from 'cropperjs' 似乎存在问题。 Corrl 在评论中提供了解决方法:

There seems to be a problem with import Cropper from 'cropperjs'; inside the REPL - when using <svelte:head> with script and stylesheet references to Cropper it looks better

另一个问题是，当您将引用传递给 Cropper 时，图像尚未完成加载。 。您可以尝试使用 onMount 相反，它在组件添加到 dom 后运行。然而，当 onMount 时，图像数据并不总是完成加载。运行。

另一个选项是绑定(bind)到 onload图像的事件。这个答案Svelte component onLoad显示技术。但是，您可以简单地调用 img.addEventListener('load', initCropper); onMount内一旦图像完全加载，它将初始化 Cropper。

<svelte:head>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/2.0.0-alpha.2/cropper.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/2.0.0-alpha.2/cropper.min.js"></script>
</svelte:head>

<script>
    import { onMount } from 'svelte'

    let img, cropper;
    
    onMount(() => {
        // call initCropper when img is loaded   
        img.addEventListener('load', initCropper);
    });

    function initCropper() {
        cropper = new Cropper(img, {
            aspectRatio: 16 / 9,
            viewMode: 2,
            crop(event) {
                console.log(event.detail);
                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>

<div>
    <img {src} bind:this={img} />  
</div>

上面的代码对我有用，你可以看到 demo here .

---

替代方案

有一个裁剪库 - svelte-easy-crop - 与 Svelte 配合使用。下面的代码取自demo :

<script>
  import Cropper from "svelte-easy-crop";

  let crop = { x: 0, y: 0 };
  let zoom = 1;
  let image = "https://cdn1-www.dogtime.com/assets/uploads/2011/03/puppy-development.jpg";
</script>

<Cropper {image} bind:crop bind:zoom />