html2canvas layer is blank – SEO

I’m using the following to create an image from a div. The div has 2 layers. 1st layer is the product image and 2nd layer is where I add logos.

The problem that some of our visitors are experiencing is the code only converts the 2nd layer to an image and ignores the 1st. Not sure how to resolve this or if I need to change the code approach?

The code works for most users, and only certain users get a blank layer 1 image. I tried multiple browsers and it works for me, but not for them :/

HTML

<div class="canvas-left" id="layer1" style="display:inline-block; height:84%;">
 <div style="text-align:center">
  <img src="@defaultImageUrl" id="cypher-main-product-img" style="max-width:98.5%; margin-top:20px;" />
 </div>
</div>

<div class="layer2" style="margin-top:20px;"></div>

JS Code

 $(document).on('click', '#email-btn', function () {
            var element = $("#layer1");
            var getCanvas;

            try {
                html2canvas(element, {
                    onrendered: function (canvas) {
                        getCanvas = canvas;
                        var imgbase64 = "";
                        imgbase64 = canvas.toDataURL('image/png');
                        imgbase64 = imgbase64.replace('data:image/png;base64,', '');

                        var _email = $("#email").val();
                        var _body = $("#message").val();
                        var _url = $("#email-from-store-url").val();
                        var _seoname = $("#seo-name").val();
                        _url = encodeURIComponent(_url);

                        $.ajax({
                            type: 'POST',
                            cache: false,
                            url: "send-email?email=" + _email + '&body=' + _body + '&url=' + _url + '&seoname=' + _seoname,
                            data: imgbase64,
                            contentType: false,
                            success: function (msg) {
                                alert(msg.message);
                            },
                            error: function () {
                                alert("error");
                            }
                        });
                    }
                });
            }
            catch (e) {
                alert(e.message);
            }

        });
    });

UPDATE
After changing the HTML code to make Layer 2 have the Product image as a background image, it still does the same thing.

    <div class="layer2" id="layer2" style="background-image:url(@defaultImageUrl); 
                                                                    background-position: center top;
                                                                    -moz-background-size: contain;
                                                                    -o-

background-size: contain;
                                                                -webkit-background-size: contain;
                                                                background-size: contain;
                                                                background-repeat:no-repeat;"></div>