一、控制背景图展示

1.检查画布是否存在背景

在Fabric.js中，可以通过检查canvas.backgroundImage属性来判断画布是否设置了背景图片。如果canvas.backgroundImage不为null或undefined，则表示画布上设置了背景图片。

// 假设canvas是你的fabric.Canvas实例// 判断是否设置了背景图片
if (canvas.backgroundImage) {console.log('画布上设置了背景图片。');
} else {console.log('画布上没有设置背景图片。');
}

2.存在，清除画布背景

// 清除背景图
canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas));

3.不存在，添加画布背景

我用的是js方式引入图片

showimgbg() {const self = thiscanvas.set('backgroundColor', '#333333')const url = `...bg.png` //图片路径fabric.Image.fromURL(pcdurl, function (img) {// 保证背景图1:1铺满容器canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {left: self.width / 2, // 鼠标x轴坐标top: self.height / 2, // 鼠标y轴坐标originX: 'center',originY: 'center',})})},

4.控制背景图展示的完整代码

 //   按钮展示背景图showbg() {console.log()if (canvas.backgroundImage) {// 清除背景图canvas.setBackgroundImage(null, canvas.renderAll.bind(canvas))} else {this.showimgbg()}},

二、控制画布上图片展示

1. 标识图片元素：在添加图片到画布时，给图片元素添加一个可识别的属性，例如type: 'image'，这样你就可以通过这个属性来区分图片和其他类型的元素。

2. 查找图片元素：遍历画布上的所有元素，检查它们是否具有标识图片的属性。

3. 清除图片元素：一旦找到图片元素，就从画布上移除它。

showneirongimg() {const self = thislet num = -1const objects = canvas.getObjects()for (let i = objects.length - 1; i >= 0; i--) {if (objects[i].type === 'image') {num = i}}if (num > -1) {canvas.remove(objects[num])} else {const url = `you/img/path.png`fabric.Image.fromURL(url, function (img) {// 设置图像位置和大小img.set({type:'image', //为图片添加属性标识...})canvas.add(img)img.sendToBack() // 确保背景图在最后面})}},