AngularJS + Canvas 및 배경 이미지 바꾸기

Question

선택한 영역에 다각형을 그리는 AngularJs 모듈을 사용하고 있습니다. 사용할 수 아래 데모 : 우리가 여기 볼 수 https://sedrakpc.github.io/ 이 이미지는 배경에 의해 채워집니다 : 홈페이지의 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'}); 

을 난 몰라 배경 이외의 것을 바꾸고 싶다.) 나는 두 가지 방법에 그것을 할 시도했지만 작동하지 않습니다 :

$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")'); 

은 ;-)

을 근무