首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将RGB值应用于HTML5画布?

如何将RGB值应用于HTML5画布?
EN

Stack Overflow用户
提问于 2017-10-25 01:12:43
回答 1查看 60关注 0票数 0

我正在尝试将RGB值应用于从Bungie API获取其所有图像数据的HTML5画布。基本上,我认为我需要做的是首先调用这些图像,然后调用RGB值并使用putImageData函数来应用颜色。到目前为止,我所做的是遍历这些图像,并通过JavaScript创建一个新的画布来应用颜色,但它似乎没有返回任何更改。我使用PHP获取数据,使用JavaScript创建画布。下面是我的代码:

代码语言:javascript
复制
        <?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);
            }
          }

如果任何人有任何想法,以便我可以应用变量$primaryColorRed$primaryColorGreen$primaryColorBlue作为前景图像源的RGB值,我将非常感谢!干杯!

EN

回答 1

Stack Overflow用户

发布于 2017-10-25 01:36:44

您在变量名上误导了自己。您正在执行以下操作:

代码语言:javascript
复制
for(var src in sources) {

但是在这种情况下,变量src实际上等于什么呢?它将等于“前景”,然后是“贡法隆”。这不是图像的src应该设置的值。在本例中,我将src重命名为key:

代码语言:javascript
复制
for(var key in sources) {
    images[key] = new Image();
    createCanvas(sources[key]);

除此之外,你不应该像现在这样创建两个镜像。在loadImage中创建图像并将其传递给createCanvas。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46916339

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档