javascript - 如何使用透明背景为本 map 标图像着色？

Question

我研究了多种解决方案，但找不到适合我需要的解决方案。

我有这张本 map 片

当我悬停图像时，我只需要将黑色背景更改为我的主题颜色。悬停图像不是一个好的解决方案，因为主题颜色会发生变化，并且很难每次都从设计者那里获得图像。

我尝试从本地源和隐藏的 div 绘制本地镜像。然后一点一点地阅读，只将黑色部分更改为我的主题颜色。

<div style='display: block'>
    <img id='img' src='back-icon-64.png' width='32' height='32' />
</div>
<canvas id="canvas" width=32 height=32>

JavaScript

function drawImage() {

    var hiddenImg = document.getElementById('img')
    var canvas = document.getElementById("canvas")
    var ctx = canvas.getContext("2d")

    var image = new Image(32, 32)
    image.src = hiddenImg.src
    image.onload = function () {
        ctx.drawImage(image, 0, 0)
        var data = ctx.getImageData(0, 0, 32, 32)
    }
}

function recolor(ctx) {

    var imgData = ctx.getImageData(0, 0, 32, 32);
    var data = imgData.data;

    for (var i = 0; i < data.length; i += 4) {
        red = data[i + 0];
        green = data[i + 1];
        blue = data[i + 2];
        alpha = data[i + 3];
        //console.log("rgba" + red + green, blue, alpha)
        console.log("rgba")
    }
}
drawImage()

虽然我尝试设置 header ，但我在控制台中收到此错误:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

一个可用的 fiddle 会很有帮助。

谢谢!

Answer 1

你可以考虑mix-blend-mode (你不会有透明度，因为你需要在图像下有白色背景)

.icon {
  width:64px;
  height:64px;
  display:inline-block;
  background:url(/image/Vi3wa.png)center/cover,
  #fff;
  position:relative;
}

.icon:hover::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c,red);
  mix-blend-mode:lighten;
}

<div class="icon">
</div>
<div class="icon" style="--c:blue;">
</div>
<div class="icon" style="--c:green;">
</div>

Selects the lighter of the backdrop and source colors.

The backdrop is replaced with the source where the source is lighter; otherwise, it is left unchanged.

https://drafts.fxtf.org/compositing-1/#valdef-blend-mode-lighten