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

你的遗失＆＃34; useCORS：true＆＃34;在你的代码中

html2canvas图层为空

2 个答案: