我正在尝试将RGB值应用于从Bungie API获取其所有图像数据的HTML5画布。基本上,我认为我需要做的是首先调用这些图像,然后调用RGB值并使用putImageData
函数来应用颜色。到目前为止,我所做的是遍历这些图像,并通过JavaScript创建一个新的画布来应用颜色,但它似乎没有返回任何更改。我使用PHP获取数据,使用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值,我将非常感谢!干杯!
发布于 2017-10-25 01:36:44
您在变量名上误导了自己。您正在执行以下操作:
for(var src in sources) {
但是在这种情况下,变量src实际上等于什么呢?它将等于“前景”,然后是“贡法隆”。这不是图像的src应该设置的值。在本例中,我将src重命名为key:
for(var key in sources) {
images[key] = new Image();
createCanvas(sources[key]);
除此之外,你不应该像现在这样创建两个镜像。在loadImage中创建图像并将其传递给createCanvas。
https://stackoverflow.com/questions/46916339
复制相似问题