We are displaying Product image1 in site as below :

enter image description here

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.

enter image description here

but now when we upload image2, image1 is overlapping on image2.

enter image description here

code for upload image from product view page


<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>


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()});
      var a = canvas.setActiveObject(oImg);
      var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});

Display Product image :

<div id="case_canvas">
<?php echo $this->getChildHtml('media') ?>   

We Tried below code, but it did't worked for us

#case_canvas {

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


1 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):

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:


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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.