Save multiple overlapped images as single image

Question

I have two overlapped images, here an example:

This is the HTML:

<div class='image-wrapper drag-area fade1' id='cupcategory-productname-1' style='width: 300px; top: 50%; left: 50%'>
    <div class='mydiv' id='drag-fronte'>
        <div id='logo-container-fronte' class='mydivheader logo'>
            <img id='cupcategory-productname-fronte' name='logo-container' style='width: 300px; top: 50%; left: 50%' src='../img/esempio_logo.png' onclick='saveImageWithLogo(this)'>
        </div>

    </div>
    <div>
        <img id='cupcategory-productname-fronte-fade' src='".$file."' alt='Candia Image' style='width:100%' class='image-one'>
    </div>
</div>

This code is generated by PHP.

This is the CSS:

.image-wrapper {
            /*position: relative;*/
            z-index: 1;
            /*cursor:pointer;*/
            background-size:contain;

            background-repeat:no-repeat;
            display:inline-block;
            /*width:200px;height:140px;*/
            -webkit-transition: all 100ms ease-in;
               -moz-transition: all 100ms ease-in;
                    transition: all 100ms ease-in;
            -webkit-filter: brightness(1) grayscale(.5) opacity(1);
               -moz-filter: brightness(1) grayscale(.5) opacity(1);
                    filter: brightness(1) grayscale(.5) opacity(1);
        }
.image-wrapper .image-one {
            /*border: 1px solid black;*/
            /*position: relative;*/
            width: 100%;
        }

        .image-wrapper .image-fronte {
            /*width:151px;height:113px;*/
            /*width: 15%; height: 15%;*/
            /*width: 65px; height: 65px;*/
            /*border: 1px solid black;*/
            position: absolute;
            top: 53%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .image-wrapper .logo {
            /*width:151px;height:113px;*/
            /*width: 15%; height: 15%;*/
            /*width: 65px; height: 65px;*/
            /*border: 1px solid black;*/
            position: absolute;
            top: 53%;
            left: 50%;
            transform: translate(-50%, 0);
        }
.mydiv {
            top: 50%;
            left: 50%;
            position: absolute;
            z-index: 9;
            text-align: center;
            /*border: 1px solid #d3d3d3;*/
        }

        .mydivheader {
            padding: 10px;
            height: 100px;
            width: 100px;
            cursor: pointer;
            z-index: 10;
            /*border: 1px solid black;*/

        }

And this is the JS:

function saveImageWithLogo(web_element)
        {
            var c=document.getElementById("myCanvas");
            var image1 = web_element;
            var image2 = document.getElementById(web_element.id + '-fade');
            console.log(image2);
            var ctx=c.getContext("2d");
            var imageObj1 = new Image();
            var imageObj2 = new Image();
            imageObj1.src = image1.src;
            imageObj1.onload = function() {
               ctx.drawImage(imageObj1, 0, 0, 100, 100);
               imageObj2.src = image2.src;
               imageObj2.onload = function() {
                  ctx.drawImage(imageObj2, 0, 0, 300, 300);
                  var img = c.toDataURL("image/png");
                  image1.src = img;
                  //document.write('<img src="' + img + '" width="328" height="526"/>');
               }
            };
        }

The image1 is the cup and it comes from my server, the image2 is the overlapped image that should be the logo of my user. Now, the scenario is this: The user sees the cup, upload his logo and wants to go ahead buying this cup with his logo. My problem is to show this Cup with logo on it in the recap page but I also need to save it on server because other reasons.

How can I do? I tryed with canvas drawing two images starting from coords 0, 0 but image2 cover the image1.

Edit

I've tried to do this:

var image_wrapper = document.getElementsByClassName('image-wrapper')[0];
                console.log(image_wrapper);
                html2canvas(image_wrapper, {
                    onrendered: function (canvas) {
                        console.log('saving...');
                        console.log(canvas);
                      var myImg = new Image();
                      myImg.src = canvas.toDataURL();
                      document.getElementById("gardenia-mug-fronte-fade").appendChild(myImg);

                      $('#hidden_input').val(myImg.src);
                    },
                });

But anything happens, the function doesn't start. What I wrong?

Edit 2

Ok now I've solved in this way:

var image_wrapper = document.getElementsByClassName('image-wrapper')[0];
            console.log(image_wrapper);
            html2canvas(image_wrapper).then(function(canvas) {
                    console.log(canvas);
                  var myImg = new Image();
                  myImg.src = canvas.toDataURL();
                  document.getElementById("gardenia-mug-fronte-fade").appendChild(myImg);
                  $('#hidden_input').val(myImg.src)
            });

But what I get is a white image. I need to get both images within the div with 'image-wrapper' class, of course I've to get them as shown in the above picture

Possible duplicate of [Merge Image using Javascript](https://stackoverflow.com/questions/6765370/merge-image-using-javascript) — weegee, Jul 11 '19 at 16:38

Mohammed Metwally · Answer 1 · 2019-07-12T00:50:49.453

1

I did that before with a friend, but idid the part of uploading the user image, then capture it as base:64 new image, and he was responsible for storing the output in the server.

i used html2canvas

a nice javascript library to capture any html content into an image, and it has a lot of good options

and that was an example of what the logic we did : -

capture the html content
then save it as base:64
print the image link inside a hidden input
user can submit the form, finally u receive that data

and here a piece of code i made for capture the image and print the output link inside hidden input

html2canvas($('.imgs_wrapper'), {

    onrendered: function (canvas) {
      var myImg = new Image();
      myImg.src = canvas.toDataURL();
      document.getElementById("image_reply").appendChild(myImg);

      $('.hidden_input').val(myImg.src)
    },
  });

edited Jul 12 '19 at 00:50

answered Jul 11 '19 at 15:39

Mohammed Metwally

383
2
11

If you can give me more explanation it could be better :) For example... ".active" is your "div" that contains both images? In my case have I to use ".image-wrapper" ? – chaw359 Jul 11 '19 at 20:15
yeah .active is the wrapper of both images, i edited the code above, rename it as .imgs_wrapper – Mohammed Metwally Jul 12 '19 at 00:52
And what is image_reply?? – chaw359 Jul 12 '19 at 20:00
Its the parent of the captured image. – Mohammed Metwally Jul 12 '19 at 20:22
So image_reply is the parent of .imgs_wrapper? – chaw359 Jul 13 '19 at 12:33
I've tried but what I get is only a white image, and I don't know why! – chaw359 Jul 13 '19 at 12:41
have you tried to set .image-wrapper position to relative – Mohammed Metwally Jul 13 '19 at 13:14
Yes but nothing changes :( – chaw359 Jul 13 '19 at 19:23

Save multiple overlapped images as single image

1 Answers1