Question

我目前正在构建一个带有一组图标的网站。它们是具有透明区域的白色.png图像。每个图像都放在div上，其背景颜色在mouseover/mouseout个事件上发生变化。

我写了一个小的JavaScript函数，我可以使用它将每个.png的白色部分设置为任何标题背景颜色，以便图像与标题融为一体，所有你看到的是透明的剖面区域变化关于鼠标事件 - 这是一个非常好的效果。

因此，图像的白色部分（不是透明部分）应该更改为标题背景颜色，并且该功能在Firefox上工作得非常好，但由于某些原因在Explorer上不能很好地工作（11 ）。

我有没有在这里看到的东西？这是进行图像编辑的代码 - 我需要做的就是传递图像的id和十六进制颜色字符串：

function setImageBg(
    imageID,
    imageColor
) {
    var img = document.getElementById(imageID);
    var canvas = document.createElement('canvas');

    // Get the red, green and blue values from the hex color
    // string.
    var redMix = parseInt(imageColor.substr(1, 2), 16);
    var greenMix = parseInt(imageColor.substr(2, 2), 16);
    var blueMix = parseInt(imageColor.substr(5, 2), 16);

    canvas.width = img.width;
    canvas.height = img.height;     
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    // Get the image data...
    var pixelData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height);
    var imgData = pixelData.data;
    var ctx = canvas.getContext('2d');
    var imgDataURL;

    // Edit the image data.
    for (imagePos = 0; imagePos < ((img.width * img.height) * 4); imagePos += 4) {
        if (pixelData.data[(imagePos + 3)] <= 99)
            continue;

        imgData[imagePos] = redMix;
        imgData[(imagePos + 1)] = greenMix;
        imgData[(imagePos + 2)] = blueMix;
    }

    ctx.putImageData(pixelData, 0, 0);
    imgDataURL = canvas.toDataURL();

    document.getElementById(imageID).src = imgDataURL;
}

就像我说的那样，它在Firefox上很棒 - 在资源管理器中，我看到的是div，它仍然尽职尽责地改变鼠标事件的颜色。好像整个图像都变得透明了。

任何帮助都会非常感激，非常感激。

更新：

好的，所以我想我已经破解了......这就是发生的事情。

问题是图像正在加载并在IE和FF中进行编辑，当我注意到图像已经在IE中加载和渲染时我认为我已经找到并修复了错误......但是在刷新图像之后再次消失了。

我把头刮了一下然后决定我浪费了足够的时间把它拉到一边。现在其他一切都已经到位并正常工作，所以我回到了这一点，这是一个正确的头颅。

所以 - 当您最初打开页面时，IE实际上会加载和编辑/渲染图像。如果刷新页面，图像会消失......或者是吗？

我对代码做了一些调整，使用alert（）来尝试和诊断问题，我决定我做的是添加一些代码来检查源文件 - 而不是潜入并改变像素颜色 - 我决定在编辑之前检查图像。

似乎在我的第二次运行中 - 加载的图像是完全黑色且完全透明的。所有像素的值都为0！

这是什么意思？那里肯定有的东西，但不应该是什么。

这是一个缓存问题吗？我稍微搞砸了一下，很奇怪IE会加载并初始显示图像但是在刷新后会忽略这样做，但是Ff很好。我尝试了一些技巧来禁用缓存，但没有任何作用......所以现在我在想，也许这是别的。

任何想法都会受到高度赞赏，我的意思是这不是一个破坏性的交易。如果没有这个功能，一切都很好，但如果我无法让它发挥作用，那将是一种耻辱。

对于任何感兴趣的人，这是经过各种更改/编辑后的更新功能：

function setImageBg(
    imageSource,
    imageSrc,
    imageDst,
    imageColor
) {
    var img = document.getElementById(imageSrc);
    var canvas = document.createElement('canvas');

    var redMix = parseInt(imageColor.substr(1, 2), 16);
    var greenMix = parseInt(imageColor.substr(3, 2), 16);
    var blueMix = parseInt(imageColor.substr(5, 2), 16);

    canvas.width = img.width;
    canvas.height = img.height;

    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

    var pixelData = canvas.getContext('2d').getImageData(0, 0, img.width, img.height);
    var imgData = pixelData.data;

    var ctx = canvas.getContext('2d');
    var imgDataURL;

    // Here's a change I made - on the first call of this function
    // when the page loads, all is good - on the second call after a
    // refresh this always returns on IE - it's as though the loaded
    // image (from file) is completely black and transparent
    // (everything is 0)...problem is the image file is never actually
    // altered - the loaded image is altered but the actual file never
    // changed - very odd...
    //  
    if (pixelData.data[0] == redMix) {
        if (pixelData.data[1] == greenMix) {
            if (pixelData.data[2] == blueMix) {
                document.getElementById(imageDst).src = document.getElementById(imageSrc).src;
                return;
            }
        }
    }

    for (imagePos = 0; imagePos < ((img.width * img.height) * 4); imagePos += 4) {
        if (pixelData.data[(imagePos + 3)] <= 99)
            continue;

        pixelData.data[imagePos] = redMix;
        pixelData.data[(imagePos + 1)] = greenMix;
        pixelData.data[(imagePos + 2)] = blueMix;
    }

    ctx.putImageData(pixelData, 0, 0);
    document.getElementById(imageDst).src = canvas.toDataURL();

    return true;
}

资源管理器 - 画布图像编辑问题

0 个答案: