Este número ha llevado alrededor de cuatro meses de estrés e investigación. No puedo encontrar una buena solución para fabric v.4 +

Esta es una de las soluciones que aprendí en línea: https://jsfiddle.net/naimsajjad/8w7hye2v/8/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"> </script> function ImageNew(){ let img01URL = prompt("Please enter your image URL", "https://"); fabric.Image.fromURL(img01URL, function(oImg) { oImg.scale(.25); oImg.left = 10; oImg.top = 10; oImg.clipPath = canvas.getActiveObject(); oImg.clipTo = function(ctx) { clipObject(this, ctx) } canvas.add(oImg); canvas.renderAll(); }); } function clipObject(thisObj, ctx) { if (thisObj.clipPath) { ctx.save(); if (thisObj.clipPath.fixed) { var retina = thisObj.canvas.getRetinaScaling(); ctx.setTransform(retina, 0, 0, retina, 0, 0); // to handle zoom ctx.transform.apply(ctx, thisObj.canvas.viewportTransform); thisObj.clipPath.transform(ctx); } thisObj.clipPath._render(ctx); ctx.restore(); ctx.clip(); var x = -thisObj.width / 2, y = -thisObj.height / 2, elementToDraw; if (thisObj.isMoving === false && thisObj.resizeFilter && thisObj._needsResize()) { thisObj._lastScaleX = thisObj.scaleX; thisObj._lastScaleY = thisObj.scaleY; thisObj.applyResizeFilters(); } elementToDraw = thisObj._element; elementToDraw && ctx.drawImage(elementToDraw, 0, 0, thisObj.width, thisObj.height, x, y, thisObj.width, thisObj.height); thisObj._stroke(ctx); thisObj._renderStroke(ctx); } }

La cuestión es que funciona si lo cargo en una biblioteca Fabric 3.6. Pero en las versiones modernas, no funciona.

En mi aplicación, cargo un rectángulo gris incoloro a través de JSON. Y el usuario selecciona ese rectángulo y carga una imagen en él. Para que la imagen se recorte en el rectángulo.

He estado intentando mucho para tratar de arreglar esto. Por favor, ayúdame.