html2canvas层为空白

Question

我正在使用以下内容从div创建图像。 div有2层。 第一层是产品图片，第二层是我添加徽标的位置。

我们的一些访问者遇到的问题是代码仅将第二层转换为图像，而忽略第一层。 不确定如何解决此问题，或者不确定是否需要更改代码方法？

该代码适用于大多数用户，只有某些用户可以获得空白的第1层图像。 我尝试了多种浏览器，但它对我有效，但不适用于它们：/

的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代码

 $(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);
            }

        });
    });

更新更改HTML代码以使第2层将产品图像作为背景图像后，它仍然执行相同的操作。

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

Answer 1

我发现图像链接引起了问题。 有些图片在www上，有些不在www上。 使它们全部成为标准，这解决了我的问题。

Answer 2

您的代码中缺少“ useCORS：true”