AngularJS + Canvas和背景圖像替換

我使用AngularJs模塊在選定區域繪製多邊形。演示以下可供選擇： https://sedrakpc.github.io/ ，因爲我們可以在這裏看到，圖像是由背景填充：網址CSS屬性 AngularJS + Canvas和背景圖像替換

我的目標是基於下拉列表中選擇要更換的形象。我花了一些研究的代碼部分從模塊：

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

我期待，我應該能夠複製的代碼部分，只需更換

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

與我的形象（我不想要改變除背景以外的任何東西）。我試圖做的兩種方式，但它不工作：

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

     } 



};

來源

2017-10-19 Rafał Wardas

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

曾爲;-)

來源

2017-10-19 15:15:39

AngularJS + Canvas和背景圖像替換

回答

相關問題