Fabric js设置背景组图文

Question

是否可以在 canvas 背景中添加文本和图像？像这样

图片和文字'Drag photo here'

Answer 1

是的！

这是可能的，这里是你如何实现的...

var canvas = new fabric.Canvas('c');

var text = new fabric.Text('DRAG PHOTO HERE', {
   top: 100,
   left: 100,
   fontSize: 14,
   fontFamily: 'Arial',
   originX: 'center',
   originY: 'center'
});

fabric.Image.fromURL('https://i.imgur.com/LKaEHRo.jpg', function(img) {
   img.setWidth(200);
   img.setHeight(200);
   var group = new fabric.Group([img, text]);
   canvas.setBackgroundImage(group);
   canvas.renderAll();
});

canvas{border:1px solid #ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Fabric js设置背景组图文

Fabric js set background group image and text

html

canvas

background-image

fabricjs