Estoy buscando resolver un problema final en esto. Si acerca la imagen en un punto y luego la aleja en algún otro punto del lienzo, la imagen no vuelve a la posición original (centro del lienzo). También establezca el alejamiento máximo en 1. Si alguien tiene una solución para mi problema, resuélvalo, es muy urgente.
Este es mi código:
const canvas = new fabric.Canvas("canvas",{ width:700, height:450, backgroundColor:"grey" // selection:false }); canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; // console.log(delta) var zoom = canvas.getZoom(); // console.log(zoom) zoom *= 0.999 ** delta; if (zoom > 40) zoom = 40; if (zoom < 1) zoom = 1; canvas.zoomToPoint({ x: opt.e.offsetX, y: opt.e.offsetY }, zoom); opt.e.preventDefault(); opt.e.stopPropagation(); }); canvas.renderAll(); //get image from user var upload_image=""; const image = document.querySelector("#image"); image.addEventListener("change",()=>{ // console.log(image.files) const reader = new FileReader(); // console.log(reader) reader.addEventListener("load",()=>{ upload_image=reader.result; }) reader.readAsDataURL(image.files[0]); }); const setImage =() =>{ setImg(); } const setImg = ()=>{ // canvas.backgroundImage=img; fabric.Image.fromURL(upload_image,(img)=>{ // img.width=500; // img.height=500; canvas.backgroundImage=img; img.center(); img.centerV(); img.centerH(); canvas.renderAll(); // canvas.add(img); }); }mi codigo html:
<body class="center"> <div class="container center"> <H1>IMAGE zoom IN and OUT</H1> <div id="canva"> <canvas id="canvas"></canvas> </div> <input type="file" accept="image/*" id="image"> <button id="btn" onclick="setImage()">Upload Image</button> </div> <script src="fabric.min.js"></script> <script src="index.js"></script> </body>