別のページに異なる背景イメージを持つキャンバスで同じ機能を使用するにはどうすればよいですか？

Question

私はfabric.jsを使用して、独自の寸法と背景画像でさまざまなキャンバスを操作しています。私の問題は、背景画像が異なる新しいキャンバスで以下の機能をどのように使い続けるかがわかりません（1つの背景画像が残っています）。私は、例えば、次のとCSSとその背景を制御しながら、新しいキャンバスを作成しようとしましたが、それは2番目のページでアプリを破る：

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

私はまだそうではなかった別のキャンバスで作業する方法を学んでいますこれをどう扱うか。前もって感謝します。

詳細：彼らは、次の両方を、これを使用している

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

：

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

として他の：今私は2ページ、持つものを持っている

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 width="700" height="700" id="d"></canvas> 

番目のインスタンスdのためのあなたのキャンバス（つまり、2ページ目にある）異なるidを、...与える

は

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

^{が、これは適切なキャンバスが}

3ページ目今

、設定別の背景に存在することが保証されます...などなど、あなたの新しいファブリックキャンバスインスタンスを開始しますあなたのCSSに、それぞれのキャンバスの画像（IDで）を入れてください。

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