We are displaying Product image1 in site as below :
Now we are giving an option to upload image2 from Product view page using below code, and what we want is uploaded image2 should overlap on existed image1 like here.
but now when we upload image2, image1 is overlapping on image2.
code for upload image from product view page
html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<div class ="up1234">
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
</div>
script
<script>
var canvas = new fabric.Canvas('canvas');
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) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:canvas.getWidth(), height:canvas.getHeight()});
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
</script>
Display Product image :
<div id="case_canvas">
<?php echo $this->getChildHtml('media') ?>
</div>
We Tried below code, but it did't worked for us
#case_canvas {
z-index:-1;
}
also once we click on "Add to cart" button we need to save uploaded image. after user place an order , the image should display in backend [ order view page ] as like Default Magento File upload option
