javascript - 为什么我的图片没有更新？

Question

代码

var back1 = {r: 206, g: 77, b: 49}
var back2 = {r: 49, g: 142, b: 66}
var back3 = {r: 66, g: 138, b: 181}
var back4 = {r: 41, g: 81, b: 148}
var back5 = {r: 206, g: 178, b: 49}
var back6 = {r: 165, g: 93, b: 165}
var back7 = {r: 24, g: 32, b: 33}
var back8 = {r: 82, g: 44, b: 115}
var back9 = {r: 24, g: 109, b: 173}
var back10 = {r: 156, g: 40, b: 49}
var back11 = {r: 214, g: 199, b: 198}
var back12 = {r: 41, g: 36, b: 82}
var PATTERN = 1;

defaultImage = "res/img/clan-badge/Pattern_" + PATTERN + ".png";
defaultBackground = back1;

var image = new Image();
image.src = defaultImage;
image.onload = main;

function main(pattern, background) {
    background = typeof background !== 'undefined' ? background : defaultBackground;
    PATTERN = pattern;
    $('#image0').attr("src", defaultImage);
    // replace red with green
    recolorImage(image, 99, 101, 99, background.r, background.g, background.b);
}

function recolorImage(img, oldRed, oldGreen, oldBlue, newRed, newGreen, newBlue) {

    var c = document.createElement('canvas');
    var ctx = c.getContext("2d");
    var w = img.width;
    var h = img.height;

    c.width = w;
    c.height = h;

    // draw the image on the temporary canvas
    ctx.drawImage(img, 0, 0, w, h);

    // pull the entire image into an array of pixel data
    var imageData = ctx.getImageData(0, 0, w, h);

    // examine every pixel, 
    // change any old rgb to the new-rgb
    for (var i = 0; i < imageData.data.length; i += 4) {
        // is this pixel the old rgb?
        if (imageData.data[i] == oldRed && imageData.data[i + 1] == oldGreen && imageData.data[i + 2] == oldBlue) {
            // change to your new rgb
            imageData.data[i] = newRed;
            imageData.data[i + 1] = newGreen;
            imageData.data[i + 2] = newBlue;
        }
    }
    // put the altered data back on the canvas  
    ctx.putImageData(imageData, 0, 0);
    // put the re-colored image back on the image
    var img1 = document.getElementById("image0");
    img1.src = c.toDataURL('image/png');

}

问题

我的问题是当我运行 main() 函数时。它不会更新图像。它确实将 PATTERN 变量更新为我传递给主参数的任何内容，但即使 PATTERN 已更新，html/物理图像也不会更改。这是因为代码先执行，所以无法更新吗？因为如果我刷新页面，它会立即显示我想要的图像，但在重新加载页面时会返回到默认状态。

额外

非常感谢代码改进。如果您还有其他问题，请随时在下面告诉我您的问题是什么。我会尽力为您的问题提供最佳答案。

Answer 1

PATTERN确实得到更新，但是 defaultImage不是因为defaultImage = "res/img/clan-badge/Pattern_" + PATTERN + ".png";仅在 PATTERN 之前运行已更新(在 main() 内)

PATTERN = pattern;之后把defaultImage = "res/image/clan-badge/Pattern_" + PATTERN + ".png"; .

编辑

以下是我建议的更新摘要:

var back = [
        {r: 206, g: 77, b: 49},
        {r: 49, g: 142, b: 66},
        {r: 66, g: 138, b: 181},
        {r: 41, g: 81, b: 148},
        {r: 206, g: 178, b: 49},
        {r: 165, g: 93, b: 165},
        {r: 24, g: 32, b: 33},
        {r: 82, g: 44, b: 115},
        {r: 24, g: 109, b: 173},
        {r: 156, g: 40, b: 49},
        {r: 214, g: 199, b: 198},
        {r: 41, g: 36, b: 82}
    ], // use back[0] through back[11] to reference these
    defaultImage = 'res/img/clan-badge/Pattern_1.png',
    defaultBackground = back[0];

function main(pattern, background) {
    var image = typeof pattern !== 'undefined' ? 'res/img/clan-badge/Pattern_' + pattern + '.png' : defaultImage,
        img = new Image();

    background = typeof background !== 'undefined' ? background : defaultBackground;

    img.src = image;
    img.onload = function () {
        // replace background color
        recolorImage(img, 99, 101, 99, background.r, background.g, background.b);
    };
}

function recolorImage(img, oldRed, oldGreen, oldBlue, newRed, newGreen, newBlue) {
    var c = document.createElement('canvas'),
        ctx = c.getContext('2d'),
        w = img.width,
        h = img.height;

    c.width = w;
    c.height = h;

    // draw the image on the temporary canvas
    ctx.drawImage(img, 0, 0, w, h);

    // pull the entire image into an array of pixel data
    var imageData = ctx.getImageData(0, 0, w, h);

    // examine every pixel, 
    // change any old rgb to the new-rgb
    for (var i = 0; i < imageData.data.length; i += 4) {
        // is this pixel the old rgb?
        if (imageData.data[i] == oldRed && imageData.data[i + 1] == oldGreen && imageData.data[i + 2] == oldBlue) {
            // change to your new rgb
            imageData.data[i] = newRed;
            imageData.data[i + 1] = newGreen;
            imageData.data[i + 2] = newBlue;
        }
    }
    // put the altered data back on the canvas  
    ctx.putImageData(imageData, 0, 0);
    // put the re-colored image back on the image
    $('#image0').attr('src', c.toDataURL('image/png'));
}

基本上问题是您没有更新 Image对象的源，并且仅更新 PATTERN和defaultImage 。我希望这对您有帮助。

替代方案

如果我可以建议进一步更改，为什么不为所需的每个背景创建图像，这样您就不需要 Canvas API 逐像素编辑它了？也许像 res/img/clan-badge/PATTERN/BACKGROUND/image.png 这样的路径或其他什么。

另一种选择是使每个徽章的背景部分透明(因为它们是 PNG 图像)，并将图像加载到 DOM 中后，只需设置 <img> 的背景颜色即可。通过 CSS 从 back 到 RGB 三元组数组，再次避免使用 Canvas API 进行逐像素编辑，如下所示:

function main(pattern, background) {
    // assuming image is transparent where background will show through
    var image = typeof pattern !== 'undefined' ? 'res/img/clan-badge/Pattern_' + pattern + '.png' : defaultImage;

    background = typeof background !== 'undefined' ? background : defaultBackground;

    $('#image0')
        .attr('src', image)
        // set background through CSS
        .css('background-color', 'rgb(' + background.r + ',' + background.g + ',' + background.b + ')');
}