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

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

先

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

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

秒

像这样启动您的新结构 canvas 实例...

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

^{这将确保适当的 canvas 出现在页面上}

第三

现在，为您的 css 中的每个 canvas（通过他们的 ID）设置不同的背景图片，就像这样...

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

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

How to use the same functions on canvases that have different background images on different pages?

html

javascript

css

fabricjs