Append div in canvas and create DataURL not working

Question

I have require to show a image and above this image i have require to place 2 divs, one div containing image and another div contain text,and require to combined all this three to create a final image and store this final image in database/server, I am using canvas to achieve this and my project is in Ionic/AngularJS, I am not able to use img and text directly without div, because i have also require to drag-drop and resize this img and text as well, and this is not achieving without using div.

This is my html code.

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

and i have canvas element define at the last as

<canvas id="tempCanvas" style="position: relative;"></canvas>

and in controller on saving button click, I am calling a function which have below contents.

var canvas = document.getElementById('tempCanvas');
var context = canvas.getContext('2d');    
var source =  document.getElementById("preview1");
var width = source.naturalWidth; 
var height = source.naturalHeight; 
canvas.width = width;
canvas.height = height;              
var canvasDiv = document.getElementById('wall-design');
canvas.appendChild(canvasDiv);
console.log("canvas", canvas)
context.drawImage(source,0,0, width, height);    
var dataURL = canvas.toDataURL("image/png");
$timeout( function(){
   $scope.wallMainImage = dataURL;
   if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
       $scope.$apply();
   }
}, 200);

I am getting a exact canvas console which i want as shown below

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

and I am also getting a datURL which is very long in a encoded letters and at last i am getting a image which have only starting image only and other image which require to shown above this image not shown

please inform me.. where i am doing wrong

Thanks in advance..

Answer 1

Here I am giving the solution, which works in my case

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

I am using angularjs directive, if anyone want to do this using jquery, simply replace angular.element with $

I have use useCORS to use image src which are not available in our local storage instead coming from some site.

user also need to download html2canvas, i have download this by taken git clone using this command

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

and specify in html file by

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

here use your own path

Thanks