Javascript html2canvas层为空

我使用下面的方法从一个div创建一个图像。这个div有两层。第一层是产品图像，第二层是我添加徽标的地方

我们的一些访问者遇到的问题是，代码只将第二层转换为图像，而忽略了第一层。不知道如何解决这个问题，或者是否需要更改代码方法

该代码适用于大多数用户，只有某些用户获得空白的第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>

更新 在更改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>

---

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

我发现图像链接导致了问题。有些图片是在www上的，有些则是非www上的。这些图片都是标准的，这就解决了我的问题

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