Overlap Product image By uploaded image in product view page

Question

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

Answer 1

Paid for turnkey solution: https://www.gomage.com/gomage-product-designer.html

After searching for over a week - there is presently no free extension that meet your requirements. I suggest you look into some HTML5 Canvas javascript libraries to achieve at least the 'designer' portion of your requirement. There are currently a few dozen available freely. Here are a few of the most popular ones (according to # of Github watchers):

• http://www.createjs.com/#!/EaselJS
• http://kineticjs.com/
• http://jonobr1.github.io/two.js/
• http://fabricjs.com/

Here is an exhaustive list with features and # of github watchers, links, links to sites and demos; compiled by the author of Fabric.js, @kangax. This is a great feature matrix:

https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0

I imagine it would be fairly easy for you to develop one of these libraries into a fully-featured drop-in extension and contribute it back to the community.

Source: Is there any free extension available for designing products label or cover in magento?