Html 在画布中追加div并创建DataURL无效

我需要显示一幅图像，在这幅图像上方我需要放置两个div，一个div包含图像，另一个div包含文本，并需要将这三个div组合起来创建最终图像，并将最终图像存储在数据库/服务器中，我使用canvas来实现这一点，我的项目是在Ionic/AngularJS中，没有div，我无法直接使用img和文本，因为我还需要拖放和调整img和文本的大小，而没有div，这是无法实现的

这是我的html代码。

<div class="item item-image" ng-repeat="picture in product.images" id="mainwall">
     <img ng-src="{{wallMainImage}}" ng-init="setInitSrc(picture.src)" width="330" height="400" crossOrigin="Anonymous" id="preview1" class="wall-image"/>
     <div id="wall-design" draggable style="position: absolute;">
        <img ng-src="{{walldesign}}" />
     </div>
     <div id="wall-text" draggable>
        <p>{{wallText}}</p>
     </div>
</div>

我得到了一个精确的画布控制台，如下所示

<canvas id="tempCanvas" style="position: relative;" width="700" height="519">
   <div id="wall-design" draggable="" style="position: absolute; height: 153px; width: 54px; left: 128px; top: 105px;" class="ui-draggable ui-draggable-handle ui-resizable">
        <img ng-src="images/designs/3.jpg" src="images/designs/3.jpg">
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
        <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
        <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
   </div></canvas>

我也得到了一个datURL，它在一个编码字母中非常长，最后我得到了一个只有起始图像的图像，其他图像需要显示在上面，这个图像没有显示

请通知我。。我做错了什么

---

提前感谢。

这里我给出了解决方案，在我的情况下是有效的

html2canvas(angular.element('#wallimageid'), {
      onrendered: function(canvas) {
         var img = canvas.toDataURL("image/png")
         console.log("img", img);
         $scope.savedGalleryImage = img;
      }, 
      useCORS:true
})

我使用的是angularjs指令，如果有人想使用jquery执行此操作，只需将angular.element替换为$

我使用useCORS来使用我们本地存储中不可用的图像src，而不是来自某个站点

用户还需要下载html2canvas，我已经用这个命令下载了这个

git clone --recursive git://github.com/niklasvh/html2canvas.git

并在html文件中指定

<script src="js/lib/html2canvas/dist/html2canvas.js"></script>

在这里使用你自己的路径

---

谢谢

您不能在画布元素中附加任何内容，您只需在其上绘制即可。有一些库可以解析html并将其转换为画布图形，最著名的是html2canvas.hi@kaido，我检查了html2canvas，发现它用于拍摄网页的“屏幕截图”，但这不是我的要求，因为我们可以使用画布的上下文绘制图像或填充文本，我只想要类似的东西，它可以在画布上附加div，请建议一些东西仔细阅读该项目的主页，它不截图，但解析html并使用画布方法绘制。不能使用drawImage绘制html元素，只能使用可视媒体。唯一高度受限的另一种方法是将html附加到svg中（外部资源需要编码到dataURI）并绘制此svg。但这确实是一种黑客行为，一点也不稳定，会让大多数浏览器污染你的画布，这不是一个好主意。因此，坚持现有的，只需在容器上调用html2Canvas，您就很好了。

useCORS:true

无法充分提升这一点！！！我有一个PDF加载没有图像，即使CORS已启用，画布没有污染。这面旗上的一切都不见了。

git clone --recursive git://github.com/niklasvh/html2canvas.git

<script src="js/lib/html2canvas/dist/html2canvas.js"></script>