如何使用fabricjs使画布中的图像固定，不可拖动和不可选择

Question

I want to get this image fixed in the canvas so that if I add a text or another image, the image/text will not go back.

<script> function GateFoldClick() {
     canvas.clear();
     fabric.Image.fromURL('images/FourFoldBrochure.jpg', function (myImg) {
         canvas.add(myImg);
         myImg.center();
     });
 }
 </script>

Answer 1

You could achieve that using setBackgroundImage() method.

ᴅᴇᴍᴏ

 var canvas = new fabric.Canvas('c'); fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function(img) { img.setWidth(200); img.setHeight(200); canvas.setBackgroundImage(img); canvas.renderAll(); }); 

 canvas{border:1px solid #ccc} 

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