AngularJS +キャンバスと背景画像の置き換え

Question

私は選択した領域にポリゴンを描画するAngularJsのモジュールを使用しています。以下の利用可能 デモ： https://sedrakpc.github.io/ 我々がここで見ることができるように、画像が背景によって移入された：URL CSSプロパティ

私の目標は、ドロップダウンの選択に基づいて、その画像を交換することです。私は、モジュールからのコードの部分にいくつかの研究をした：（私は、コードの一部を複製し、ちょうど私のイメージで

   $canvas.css({background: 'url('+image.src+')'}); 

を交換することができなければならないことを期待してい

link: function(scope, element, attrs, ctrl){ 

       var activePoint, settings = {}; 
       var $canvas, ctx, image; 

       settings.imageUrl = scope.imageUrl; 

       if(!scope.points) { 
        scope.points = [[]]; 
       } 

       if(!scope.active) { 
        scope.active = 0; 
       } 

       $canvas = $('<canvas>'); 
       ctx = $canvas[0].getContext('2d'); 

       image = new Image(); 
       scope.resize = function() { 
        $canvas.attr('height', image.height).attr('width', image.width); 
        $canvas.attr('height', $canvas[0].offsetHeight).attr('width', $canvas[0].offsetWidth); 
        scope.draw(); 
       }; 
       $(image).load(scope.resize); 
       image.src = settings.imageUrl; 
       if (image.loaded) scope.resize(); 
       $canvas.css({background: 'url('+image.src+')'}); 
       $canvas.css({backgroundSize: 'contain'}); 

を私はしないでください背景以外のものを変更したい）。私は、次の2つの方法でそれを実行しようとしましたが、それは動作しません：

$scope.undo = function(){ 

    $scope.imageSrc = "http://localhost:3333/img/1.jpg"; 

    var $canvas, ctx, image; 

    $canvas = $('<canvas>'); 
    ctx = $canvas[0].getContext('2d'); 

    $canvas.css({background: 'url('+$scope.imageSrc+')'}); 
    $canvas.css({backgroundSize: 'contain'}); 
    // second way 
     var background = new Image(); 
     background.src = $scope.imageSrc; 
     background.onload = function(){ 
      ctx.drawImage(background,0,0); 

     } 



}; 

Answer 1

$("canvas").css("background-image", 'url("http://localhost:3333/img/'+id+'.png")'); 

は;-)

を働い