Estoy luchando para que cropperjs funcione en svelte. Cualquier ayuda sería apreciada.
El guión esbelto es el siguiente
<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="">el error es:
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:2Parece que hay un problema al usar import Cropper from 'cropperjs' . Corrl proporcionó una solución alternativa en un comentario:
Parece que hay un problema con la
import Cropper from 'cropperjs';dentro de REPL: cuando se usa<svelte:head>con referencias de guiones y hojas de estilo a Cropper, se ve mejor
Otro problema es que la imagen no ha terminado de cargarse cuando pasa la referencia a Cropper . Podría intentar usar onMount en su lugar, que se ejecuta después de agregar el componente al dom. Sin embargo, los datos de la imagen no siempre han terminado de cargarse cuando se ejecuta onMount .
Otra opción es enlazar con el evento de onload de la imagen. Esta respuesta al componente Svelte onLoad muestra la técnica. Sin embargo, simplemente puede llamar a img.addEventListener('load', initCropper); dentro de onMount que inicializará Cropper una vez que la imagen se haya cargado por completo.
<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>El código anterior funciona para mí, puedes ver una demostración aquí .
Alternativa
Hay una biblioteca de recorte, svelte-easy-crop , que funciona con Svelte. El siguiente código está tomado de la demostración :
<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 />sí, la sugerencia de Corrl fue acertada. Agregar los elementos de la cabeza resolvió el problema. También se requiere el punto de Haldo, sobre el uso de onMount.
Una alternativa a la inicialización de Cropper dentro de onMount sería use:action > Documentos > 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>