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”