在 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 (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 在评论中提供了 work-around：

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 运行时，图像数据并不总是完成加载。

另一种选择是绑定到图像的 onload 事件。这个对的回答展示了这个技巧。但是，您可以简单地在 onMount 中调用 img.addEventListener('load', initCropper);，这将在图像完全加载后初始化 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 - which works with Svelte. The code below is taken from the 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 />

Answer 2

是的，Corrl 的建议很正确。添加 head 元素解决了问题。还有 haldo 的观点，关于使用 onMount 也是必需的。

Answer 3

在 onMount 中初始化 Cropper 的替代方法是 use:action > Docs > REPL

<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>
    let cropper;
    
    function initCropper(node){
        console.log('loaded', node.complete)
        cropper = new Cropper(node, {
            aspectRatio: 16 / 9,
            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 use:initCropper src="https://cdn1-www.dogtime.com/assets/uploads/2011/03/puppy-development.jpg" alt="">
</div>

<style>
    img {
        display: block;
        max-width: 100%;
    }
</style>

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

cropping image in svelte The first argument is required and must be an <img> or <canvas> element

javascript

svelte