织物js剪辑对象到背景图像

Question

I am working on fabric js and I have encountered a problem where i have to clip user added object (text, image, svg etc) to background image set in canvas. The background image could be png or svg(with multiple path). The background image is of non-uniform shape, such as leaf, shirt etc.

How could it be done?

Answer 1

 var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/a/a2/Litchi_chinensis_leaf.png', function(img){ img.scale(0.3); canvas.setBackgroundImage(img); canvas.renderAll(); } ); var rect = new fabric.Rect({ width:80, height:100, fill:'red', globalCompositeOperation: 'source-atop', top: 100 }); canvas.add(rect); var circle = new fabric.Circle({ radius:80, height:100, fill:'blue', globalCompositeOperation: 'source-atop' }); canvas.add(circle); circle.center().setCoords(); 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas> 

This snippet shows you what is doable. Is not easy to clip with an "image". What you can do is use globalCompositeOperation as i show you.

As you see rect and circle are visible only over the background and not outside.

If you want using another value other than "source-atop" you can obtain different effects. With "source-in" the background will be transparent and will serve the only porpouse of "clipping" the area