HTML5画布：更改图像颜色

问题描述

我有一个图像（灰度形式），我想更改颜色（用户特定）。因为它很难改变灰度图像的颜色，我有一种方法。

I have an image(in greyscale form) of which i want to change the color(user specific). Since its quite difficult to change the color of a greyscale image, i come with an approach.

图像分为两部分。

1. 一种是白色的图像。


2. 其次，半透明的灰度图像。

现在，我把两个图像放在彼此的顶部（下面有白色图像，顶部有灰度图像），这样当我改变白色图像的颜色时，

Now, i place both image on top of each other(with white image on below and greyscale image on top) such that when i change the color of white image, it will be visible to user.

问题：此方法适用于我，除了一个问题。当我对白色图片进行着色时，它会从边角像素化。

JSFiddle：

JSFiddle: http://jsfiddle.net/pandey_mohit/BeSwL/

JSFiddle包含三个胶囊图片：

JSFiddle contains three images for capsules:

1. 顶部胶囊部分白色图像（用于着色）


2. 底部胶囊部分白色图像>
   
3. 用于3D效果的半透明图像（使用灰度）

选择红色，绿色或蓝色

function hexToRgb(color) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    color = color.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : {
        r: 0,
        g: 0,
        b: 0
    };
}

function colorImage(imgId,hexaColor) {
    // create hidden canvas (using image dimensions)
    var imgElement = document.getElementById(imgId);

    var canvas = document.createElement("canvas");
    canvas.width = imgElement.width;
    canvas.height = imgElement.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);

    var data = imageData.data;

    // convert image to grayscale
    var rgbColor = hexToRgb(hexaColor);

    for(var p = 0, len = data.length; p < len; p+=4) {
        if(data[p+3] == 0)
           continue;
        data[p + 0] = rgbColor.r;
        data[p + 1] = rgbColor.g;
        data[p + 2] = rgbColor.b;
        data[p + 3] = 255;
    }
    ctx.putImageData(imageData, 0, 0);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

// changing color of capsule on select event
document.getElementById('sel_top').onchange = function(){
    colorImage('img_top', this.value);
}
document.getElementById('sel_bottom').onchange = function(){
    colorImage('img_bottom', this.value);
}

推荐答案

每个RGBA四重点的字节为255，它丢弃叠加的alpha通道，并打破图像边缘周围的反锯齿。保留原始Alpha通道可以获得更好的结果：

Your recoloring algorithm sets the 4th byte of each RGBA quartet to 255, which discards the alpha channel of the overlay and breaks the anti-aliasing around the edges of the image. Keeping the alpha channel of the original gives you better results:

for(var p = 0, len = data.length; p < len; p+=4) {
    data[p + 0] = rgbColor.r;
    data[p + 1] = rgbColor.g;
    data[p + 2] = rgbColor.b;
}

这篇关于HTML5画布：更改图像颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！