如何在不同页面上具有不同背景图像的画布上使用相同的功能？

Question

我正在使用 fabric.js 来操作具有自己尺寸和背景图像的不同画布。我的问题是我不确定如何继续使用具有不同背景图像的新画布的以下功能（我被一个背景图像卡住了）。我尝试使用以下示例创建新画布并使用 CSS 控制它们的背景，但它会破坏第二页上的应用程序：

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

我仍在学习如何使用不同的画布，所以不确定如何处理。提前致谢。

详情：

现在我有 2 页，其中一页有：

<canvas width="500" height="500" id="c"></canvas>

另一个是：

<canvas width="700" height="700" id="c"></canvas>

他们都在使用以下 JavaScript 和 CSS：

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

// Upload image
document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {

      //create shadow
      var shadow = {
        color: '#888888',
        blur: 70,
        offsetX: 45,
        offsetY: 45,
        opacity: 0.8
      }

      var oImg = img.set({
        left: 0,
        top: 0,
        angle: 0,
        stroke: '#fffcf7',
        strokeWidth: 20
      }).scale(1);
      oImg.setShadow(shadow); //set shadow
      canvas.add(oImg).renderAll();
      var dataURL = canvas.toDataURL({
        format: 'png',
        quality: 1
      });
    });
  };
  reader.readAsDataURL(file);
});

// Add text
function Addtext() {
  canvas.add(new fabric.IText('Tap and Type', {
    // left: 0,
    // top: 0,
    fontFamily: 'helvetica neue',
    fill: '#000',
    stroke: '#000',
    strokeWidth: .2,
    fontSize: 45
  }));
}

// Delete selected object
window.deleteObject = function() {
  var activeGroup = canvas.getActiveGroup();
  if (activeGroup) {
    var activeObjects = activeGroup.getObjects();
    for (let i in activeObjects) {
      canvas.remove(activeObjects[i]);
    }
    canvas.discardActiveGroup();
    canvas.renderAll();
  } else canvas.getActiveObject().remove();
}

// Send selected object to front or back
var selectedObject;
canvas.on('object:selected', function(event) {
  selectedObject = event.target;
});
var sendtoback = function() {
  canvas.sendToBack(selectedObject);
}
var sendtofront = function() {
  canvas.bringToFront(selectedObject);
}

fabric.Object.prototype.set({
  transparentCorners: true,
  lockUniScaling: true,
  cornerColor: '#22A7F0',
  borderColor: '#22A7F0',
  cornerSize: 12,
  padding: 5
});

#c {
   background: url(http://i.imgur.com/RkNFWSY.jpg);
}

.myFile {
  position: relative;
  overflow: hidden;
  float: left;
  clear: left;
}
.myFile input[type="file"] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 30px;
  filter: alpha(opacity=0);
}

Answer 1

第一

给你的画布（在第二页）一个不同的 id ，例如 d ...

<canvas width="700" height="700" id="d"></canvas>

秒

像这样启动你的新织物画布实例......

var id = document.getElementById('c') && c ||
         document.getElementById('d') && d;
var canvas = new fabric.Canvas(id);

^{这将确保页面上存在适当的画布}

第三

现在，在你的 css 中为每个画布（通过它们的 id）设置不同的背景图像，就像这样......

#c {
    background: url(http://i.imgur.com/RkNFWSY.jpg);
}
#d {
    background: url(http://i.imgur.com/GYpod56.jpg);
}