Wie könnte ich rbg Werte auf eine html5 Canvas anwenden

Question

Ich versuche, rgb Werte auf eine HTML5 Canvas, die alle seine Bilddaten aus der Bungie Apis bekommt anwenden. Ich habe noch nie mit einer Leinwand gearbeitet, entschuldige meine Unwissenheit zu diesem Thema. Grundsätzlich muss ich diese Bilder zuerst aufrufen, dann die rgb-Werte aufrufen und die putImageData-Funktion verwenden, um die Farben anzuwenden. Was ich bisher gemacht habe, ist diese Bilder zu durchlaufen und eine neue Leinwand durch Javascript zu erstellen, um die Farben anzuwenden, aber es scheint nicht mit irgendwelchen Änderungen zurückzukehren. Ich verwende PHP, um die Daten zu erhalten, und Javascript, um die Leinwand zu erstellen. Hier ist mein Code:

 <?php 
      $decal = (array) getSingleDefinition('Decals', $group->detail->clanInfo->clanBannerData->decalId); 
      $decalLink = array_values($decal); 
      $primaryColor = (array) getSingleDefinition('DecalSecondaryColors', $group->detail->clanInfo->clanBannerData->decalBackgroundColorId); 
      $primaryColorLink = array_values($primaryColor); 
      $primaryColorRed = $primaryColorLink[0]->red; 
      $primaryColorGreen = $primaryColorLink[0]->green; 
      $primaryColorBlue = $primaryColorLink[0]->blue; 
      $gonfalon = (array) getSingleDefinition('GonfalonDetails', $group->detail->clanInfo->clanBannerData->gonfalonDetailId); 
      $gonfalonLink = array_values($gonfalon); 
     ?> 
     <canvas id="clanBanner" width="270" height="600"> 
     </canvas> 
     <script> 
      function loadImages(sources, callback) { 
      var images = {}; 
      var loadedImages = 0; 
      var numImages = 0; 

      for(var src in sources) { 
       numImages++; 
      } 
      for(var key in sources) { 
       images[key] = new Image(); 
       createCanvas(sources[key]); 

       images[key].onload = function() { 
       if(++loadedImages >= numImages) { 
        callback(images); 
       } 
       }; 
       images[key].src = sources[key]; 
      } 
      } 
      var canvas = document.getElementById("clanBanner"); 
      var context = canvas.getContext("2d"); 


      var sources = { 
      foreground: "http://www.bungie.net<?php echo $decalLink[0]->foregroundImagePath ?>", 
      gonfalon: "http://www.bungie.net<?php echo $gonfalonLink[0]->foregroundImagePath ?>", 
      }; 

      loadImages(sources, function(images) { 
      context.drawImage(images.foreground, 4, 35, 270, 400); 
      context.drawImage(images.gonfalon, 4, 55, 270, 400); 
      }); 

      function createCanvas(source) { 
      var img = new Image(); 
      img.src = source; 
      img.onload = function() { 
       draw(this); 
      }; 

      var canvas = document.createElement("canvas"); 
      var context = canvas.getContext("2d"); 
      context.drawImage(img,0,0); 
      img.style.display = "none"; 
      var imageData = context.getImageData(0,0,canvas.width,canvas.height); 
      var data = imageData.data; 
      if(source == sources.foreground){ 
       for(var i = 0; i < data.length; i += 4){ 
       data[i] = "<?php echo $primaryColorRed ?>"; 
       data[i + 1] = "<?php echo $primaryColorGreen ?>"; 
       data[i + 2] = "<?php echo $primaryColorBlue ?>"; 
       } 
       context.putImageData(imageData, 0, 0); 
      } 
      } 

Wenn jemand eine Idee hat, so dass ich die Variablen $ primaryColorRed, $ primaryColorGreen gelten könnte, und $ primaryColorBlue als die RGB-Werte für den Vordergrund Bildquelle, würde ich sehr zu schätzen es! Prost!

Answer 1

Sie haben sich mit Variablennamen in die Irre geführt. Sie tun:

for(var src in sources) { 

Aber was wird die Variable src in diesem Fall tatsächlich gleich? Es wird gleich "Vordergrund" und dann "Gonfalon". Das ist nicht der Grund, auf den der Bildausschnitt eingestellt sein sollte. Ich würde src in diesem Fall Schlüssel umbenennen:

for(var key in sources) { 
    images[key] = new Image(); 
    createCanvas(sources[key]); 

Abgesehen davon, sollten Sie nicht zwei Bilder erstellen müssen, wie Sie sich gerade befinden. Erstellen Sie das Image in loadImage und übergeben Sie das Image an createCanvas.