fabricjsを使用してキャンバス内の画像を固定、非保持、選択不可能にする方法

Question

この画像をキャンバスに固定して、テキストまたは別の画像を追加すると画像/テキストが戻らないようにします。

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

Answer 1

あなたはsetBackgroundImage()方法を使用していることを達成できます。

ᴅᴇᴍᴏ

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>