Keep Added Image Behind Image while Moving - fabricjs

Question

I'm using fabricjs 1.7.22 with a toggle-able background and the ability to add images behind said background images. I have it nearly working as I'd like but my problem is that when I move an image uploaded from my computer behind a frame image, it isn't staying behind the frame in the first canvas. However, it is working as it should in the static canvases. What am I doing wrong?
I have canvas.preserveObjectStacking = true; set, so am confused.
Please see my code snippet below, choose an image, and upload an image from your computer to see replicate my problem.
var canvas = [],
image;
canvas.push(new fabric.Canvas('c0'));
for (i = 1; i <= 7; i++) {
canvas.push(new fabric.StaticCanvas('sc' + i));
}
canvas.preserveObjectStacking = true;
function dropText() {
var text = new fabric.IText('Type here...', {
fontSize: 27,
top: 10,
left: 10,
});
canvas[0].add(text);
}
canvas[0].on('object:added', onModified);
canvas[0].on('object:modified', onModified);
canvas[0].on('object:scaling', onModified);
canvas[0].on('object:moving', onModified);
function onModified(option) {
var ob = option.target;
var index = canvas[0].getObjects().indexOf(ob);
ob.clone(function(obj) {
for (i = 1; i <= 7; i++) {
canvas[i].insertAt(obj, index, true);
}
});
};
// New Photo to Canvas
document.getElementById('addimg').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
image.set({
left: 10,
top: 10,
}).scaleToHeight(100);
canvas[0].add(image);
canvas[0].sendToBack(image);
updateCanvas();
};
};
reader.readAsDataURL(e.target.files[0]);
};
$('#update').click(function() {
updateCanvas();
});
function updateCanvas() {
var json = JSON.stringify(canvas[0]);
for (i = 1; i <= 7; i++) {
canvas[i].loadFromJSON(json);
}
}
// Toggling Images
function replaceImage(imgUrl) {
if (!isImageLoaded) return; //return if initial image not loaded
image.setSrc(imgUrl, function() {
canvas[0].renderAll();
updateCanvas();
});
}
// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
isImageLoaded = true;
image = img.set({
selectable: false,
evented: false,
}).scale(0.5);
canvas[0].add(image);
canvas[0].sendToBack(image);
updateCanvas();
});
$('#save').click(function() {
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'myfile.jpg';
a.click();
}
});
});
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #f00;
margin: 0px;
display: block;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
#addimg {
position: relative;
overflow: hidden;
cursor: pointer;
}
input {
position: absolute;
font-size: 50px;
opacity: 0;
right: 0;
top: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick="dropText();" class="dropdown-item">Add Text</button>
<a id="addimg" class="dropdown-item">
<input type="file" name="file" />Add Image</a>
<button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/RuZ5HTH.png')">Image A Pic</button>
<button onclick="replaceImage('https://i.imgur.com/u3Knj4R.png')">Image B Pic</button>
<div id="imagesave">
<table>
<tr>
<td>
<canvas id="c0" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc1" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc2" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc3" width="187.5" height="318.75"></canvas>
</td>
</tr>
<tr>
<td>
<canvas id="sc4" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc5" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc6" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc7" width="187.5" height="318.75"></canvas>
</td>
</tr>
</table>
</div>

Answer 1

You need to add preserveObjectStacking:true to each canvas, as you are implementing the preserveObjectStacking:true to the array and not to the canvas.
var canvas = [],
image;
canvas.push(new fabric.Canvas('c0',{preserveObjectStacking:true}));
for (i = 1; i <= 7; i++) {
canvas.push(new fabric.StaticCanvas('sc' + i,{preserveObjectStacking:true}));
}
canvas.preserveObjectStacking = true;
function dropText() {
var text = new fabric.IText('Type here...', {
fontSize: 27,
top: 10,
left: 10,
});
canvas[0].add(text);
}
canvas[0].on('object:added', onModified);
canvas[0].on('object:modified', onModified);
canvas[0].on('object:scaling', onModified);
canvas[0].on('object:moving', onModified);
function onModified(option) {
var ob = option.target;
var index = canvas[0].getObjects().indexOf(ob);
ob.clone(function(obj) {
for (i = 1; i <= 7; i++) {
canvas[i].insertAt(obj, index, true);
}
});
};
// New Photo to Canvas
document.getElementById('addimg').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function () {
var image = new fabric.Image(imgObj);
image.set({
left: 10,
top: 10,
}).scaleToHeight(100);
canvas[0].add(image);
canvas[0].sendToBack(image);
updateCanvas();
};
};
reader.readAsDataURL(e.target.files[0]);
};
$('#update').click(function() {
updateCanvas();
});
function updateCanvas() {
var json = JSON.stringify(canvas[0]);
for (i = 1; i <= 7; i++) {
canvas[i].loadFromJSON(json);
}
}
// Toggling Images
function replaceImage(imgUrl) {
if (!isImageLoaded) return; //return if initial image not loaded
image.setSrc(imgUrl, function() {
canvas[0].renderAll();
updateCanvas();
});
}
// Default (Blank)
fabric.Image.fromURL('https://i.imgur.com/SamdNdX.png', function(img) {
isImageLoaded = true;
image = img.set({
selectable: false,
evented: false,
}).scale(0.5);
canvas[0].add(image);
canvas[0].sendToBack(image);
updateCanvas();
});
$('#save').click(function() {
html2canvas($('#imagesave'), {
onrendered: function(canvas) {
var a = document.createElement('a');
// toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
a.download = 'myfile.jpg';
a.click();
}
});
});
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #f00;
margin: 0px;
display: block;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
#addimg {
position: relative;
overflow: hidden;
cursor: pointer;
}
input {
position: absolute;
font-size: 50px;
opacity: 0;
right: 0;
top: 0;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<button onclick="dropText();" class="dropdown-item">Add Text</button>
<a id="addimg" class="dropdown-item">
<input type="file" name="file" />Add Image</a>
<button id="save">Save</button>
<button onclick="replaceImage('https://i.imgur.com/SamdNdX.png')">Blank</button>
<button onclick="replaceImage('https://i.imgur.com/RuZ5HTH.png')">Image A Pic</button>
<button onclick="replaceImage('https://i.imgur.com/u3Knj4R.png')">Image B Pic</button>
<div id="imagesave">
<table>
<tr>
<td>
<canvas id="c0" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc1" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc2" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc3" width="187.5" height="318.75"></canvas>
</td>
</tr>
<tr>
<td>
<canvas id="sc4" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc5" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc6" width="187.5" height="318.75"></canvas>
</td>
<td>
<canvas id="sc7" width="187.5" height="318.75"></canvas>
</td>
</tr>
</table>
</div>