キャンバスにdivを追加してDataURLが作成されない

Question

イメージを表示する必要があります。イメージを表示する必要があります.2つのdiv、イメージを含むdiv、テキストを含むdivが必要です。これらを組み合わせて作成する必要があります。この最終的なイメージをデータベース/サーバーに保存するためキャンバスを使用してこれを達成しています。私のプロジェクトはIonic/AngularJSで、imgとtextをdivなしで直接使用することはできません。この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要素を持っているが、ボタンのクリックを保存するに

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

とコントローラのように最後に定義し、私は内容の下に持っている関数を呼び出しています。

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

私は

<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を取得しています私は間違って

をしています。..お知らせください

を示さず、この画像の上に表示するために必要な唯一の開始画像のみやその他のイメージを持っている画像事前にの

おかげ..誰もが、この使用してjQueryのを行いたい場合

Answer 1

ここで私は私の場合に機能するソリューション、

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

を与えている私は単にangular.elementを交換、angularjsディレクティブを使用していますwith $

私はuseCORSを使用して、画像srcを使用しています。これは、一部のサイトからのものではなく、ローカルストレージにはありません。

ユーザーはまた、私は

独自のパスを使用し、ここで、このコマンドを

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

を使用して撮影したgitのクローンで、これをダウンロードして

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

でhtmlファイルで指定している、html2canvasをダウンロードする必要があります

ありがとう