Javascript 在鼠标悬停时从画布获取像素颜色

Get pixel color from canvas, on mouseover

提问by vince83000

Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far:

是否可以获取鼠标下方的RGB值像素？有没有完整的例子？这是我到目前为止所拥有的：

<script>
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var img = new Image();
  img.src = 'Your URL';

  img.onload = function(){
    ctx.drawImage(img,0,0);


  };

  canvas.onmousemove = function(e) {
        var mouseX, mouseY;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }
        var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;

        $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);
  };
}

</script>

回答by Wayne

Here's a complete, self-contained example. First, use the following HTML:

这是一个完整的、自包含的示例。首先，使用以下 HTML：

<canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>

Then put some squares on the canvas with random background colors:

然后在画布上放置一些具有随机背景颜色的方块：

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = randomColor();
context.fillRect(0, 0, 50, 50);
context.fillStyle = randomColor();
context.fillRect(55, 0, 50, 50);
context.fillStyle = randomColor();
context.fillRect(110, 0, 50, 50);

And print each color on mouseover:

并在鼠标悬停时打印每种颜色：

$('#example').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
});

The code above assumes the presence of jQuery and the following utility functions:

上面的代码假设存在 jQuery 和以下实用程序函数：

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
    return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`
}

See it in action here:

在这里查看它的实际效果：

• https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203

• https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203

// set up some sample squares with random colors
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = randomColor();
context.fillRect(0, 0, 50, 50);
context.fillStyle = randomColor();
context.fillRect(55, 0, 50, 50);
context.fillStyle = randomColor();
context.fillRect(110, 0, 50, 50);

$('#example').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
});

$('#example').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coord = "x=" + x + ", y=" + y;
    var c = this.getContext('2d');
    var p = c.getImageData(x, y, 1, 1).data; 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    $('#status').html(coord + "<br>" + hex);
});

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}

function randomInt(max) {
  return Math.floor(Math.random() * max);
}

function randomColor() {
 return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="example" width="200" height="60"></canvas>
<div id="status"></div>

    

回答by Caio Vertematti

I know this is an old question, but here's an alternative. I'd store that image data in an array, then, on mouse move event over the canvas:

我知道这是一个老问题，但这里有一个替代方案。我将该图像数据存储在一个数组中，然后，在画布上的鼠标移动事件中：

var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4
var r = data[index]
var g = data[index + 1]
var b = data[index + 2]
var a = data[index + 3]

A lot easier than getting the imageData everytime.

比每次获取 imageData 容易得多。

回答by ebragaparah

Merging various references found here in StackOverflow (including the article above) and in other sites, I did so using javascript and JQuery:

合并在 StackOverflow（包括上面的文章）和其他站点中找到的各种引用，我使用 javascript 和 JQuery 这样做：

<html>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script src="jquery.js"></script>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var img = new Image();
        img.src = 'photo_apple.jpg';
        context.drawImage(img, 0, 0);
    };

    function findPos(obj){
    var current_left = 0, current_top = 0;
    if (obj.offsetParent){
        do{
            current_left += obj.offsetLeft;
            current_top += obj.offsetTop;
        }while(obj = obj.offsetParent);
        return {x: current_left, y: current_top};
    }
    return undefined;
    }

    function rgbToHex(r, g, b){
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
    }

$('#myCanvas').click(function(e){
    var position = findPos(this);
    var x = e.pageX - position.x;
    var y = e.pageY - position.y;
    var coordinate = "x=" + x + ", y=" + y;
    var canvas = this.getContext('2d');
    var p = canvas.getImageData(x, y, 1, 1).data;
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    alert("HEX: " + hex);
});
</script>
<img src="photo_apple.jpg"/>
</body>
</html>

This is my complete solution. Here I only used canvas and one image, but if you need to use <map>over the image, it's possible too.

这是我的完整解决方案。这里我只使用了画布和一张图片，但如果您需要<map>在图片上使用，也可以。

回答by user889030

calling getImageData every time will slow the process ... to speed up things i recommend store image data and then you can get pix value easily and quickly, so do something like this for better performance

每次调用 getImageData 都会减慢进程......为了加快速度，我建议存储图像数据，然后您可以轻松快速地获取 pix 值，因此请执行以下操作以获得更好的性能

// keep it global
let imgData = false;  // initially no image data we have

// create some function block 
if(imgData === false){   
  // fetch once canvas data     
  var ctx = canvas.getContext("2d");
  imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
}
    // Prepare your X Y coordinates which you will be fetching from your mouse loc
    let x = 100;   // 
    let y = 100;
    // locate index of current pixel
    let index = (y * imgData.width + x) * 4;

        let red = imgData.data[index];
        let green = imgData.data[index+1];
        let blue = imgData.data[index+2];
        let alpha = imgData.data[index+3];
   // Output
   console.log('pix x ' + x +' y '+y+ ' index '+index +' COLOR '+red+','+green+','+blue+','+alpha);

回答by slamborne

Quick Answer

快速回答

context.getImageData(x, y, 1, 1).data;returns an rgba array. e.g. [50, 50, 50, 255]

context.getImageData(x, y, 1, 1).data;返回一个 rgba 数组。例如[50, 50, 50, 255]

---

---

Here's a version of @lwburk's rgbToHex function that takes the rgba array as an argument.

这是@lwburk 的 rgbToHex 函数的一个版本，它将 rgba 数组作为参数。

function rgbToHex(rgb){
  return '#' + ((rgb[0] << 16) | (rgb[1] << 8) | rgb[2]).toString(16);
};

回答by Danziger

If you need to get the average color of a rectangular area, rather than the color of a single pixel, please take a look at this other question:

如果您需要获取矩形区域的平均颜色，而不是单个像素的颜色，请查看另一个问题：

JavaScript - Get average color from a certain area of an image

JavaScript - 从图像的特定区域获取平均颜色

Anyway, both are done in a very similar way:

无论如何，两者都是以非常相似的方式完成的：

Getting The Color/Value of A Single Pixel from An Image or Canvas

从图像或画布中获取单个像素的颜色/值

To get the color of a single pixel, you would first draw that image to a canvas, which you have already done:

要获得单个像素的颜色，您首先要将该图像绘制到画布上，您已经完成了该操作：

const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;

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

context.drawImage(image, 0, 0, width, height);

And then get the value of a single pixel like this:

然后像这样获取单个像素的值：

const data = context.getImageData(X, Y, 1, 1).data;

// RED   = data[0]
// GREEN = data[1]
// BLUE  = data[2]
// ALPHA = data[3]

Speeding Thins Up by Getting all ImageData at Once

通过一次获取所有 ImageData 来加速瘦身

You need to use this same CanvasRenderingContext2D.getImageData()to get the values of the whole image, which you do by changing its third and fourth params. The signature of that function is:

您需要使用相同的CanvasRenderingContext2D.getImageData()来获取整个图像的值，您可以通过更改其第三和第四个参数来实现。该函数的签名是：

ImageData ctx.getImageData(sx, sy, sw, sh);

• sx: The x coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.
• sy: The y coordinate of the upper left corner of the rectangle from which the ImageData will be extracted.
• sw: The width of the rectangle from which the ImageData will be extracted.
• sh: The height of the rectangle from which the ImageData will be extracted.

• sx: 矩形左上角的 x 坐标，从中提取 ImageData。
• sy: 矩形左上角的 y 坐标，从中提取 ImageData。
• sw：将从中提取 ImageData 的矩形的宽度。
• sh：将从中提取 ImageData 的矩形的高度。

You can see it returns an ImageDataobject, whatever that is. The important part here is that that object has a .dataproperty which contains all our pixel values.

你可以看到它返回一个ImageData对象，无论是什么。这里的重要部分是该对象具有.data包含我们所有像素值的属性。

However, note that .dataproperty is a 1-dimension Uint8ClampedArray, which means that all the pixel's components have been flattened, so you are getting something that looks like this:

但是，请注意.dataproperty 是 1-dimension Uint8ClampedArray，这意味着所有像素的组件都已展平，因此您会得到如下所示的内容：

Let's say you have a 2x2 image like this:

假设您有一个像这样的 2x2 图像：

 RED PIXEL |       GREEN PIXEL
BLUE PIXEL | TRANSPARENT PIXEL

Then, you will get them like this:

然后，你会像这样得到它们：

[ 255, 0, 0, 255,    0, 255, 0, 255,    0, 0, 255, 255,    0, 0, 0, 0          ]
|   RED PIXEL   |    GREEN PIXEL   |     BLUE PIXEL   |    TRANSPAERENT  PIXEL |
|   1ST PIXEL   |      2ND PIXEL   |      3RD PIXEL   |             4TH  PIXEL | 

As calling getImageDatais a slow operation, you can call it only once to get the data of all the image (sw= image width, sh= image height).

由于调用getImageData是一个缓慢的操作，您只能调用一次来获取所有图像的数据（sw=图像宽度，sh=图像高度）。

Then, in the example above, if you want to access the components of the TRANSPARENT PIXEL, that is, the one at position x = 1, y = 1of this imaginary image, you would find its first index iin its ImageData's dataproperty as:

然后，在上面的例子中，如果你想访问 的组件TRANSPARENT PIXEL，即x = 1, y = 1这个假想图像的位置，你会i在它ImageData的data属性中找到它的第一个索引：

const i = (y * imageData.width + x) * 4;

? Let's See It in Action

? 让我们看看它在行动

const solidColor = document.getElementById('solidColor');
const alphaColor = document.getElementById('alphaColor');
const solidWeighted = document.getElementById('solidWeighted');

const solidColorCode = document.getElementById('solidColorCode');
const alphaColorCode = document.getElementById('alphaColorCode');
const solidWeightedCOde = document.getElementById('solidWeightedCode');

const brush = document.getElementById('brush');
const image = document.getElementById('image');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const width = image.width;
const height = image.height;

const BRUSH_SIZE = brush.offsetWidth;
const BRUSH_CENTER = BRUSH_SIZE / 2;
const MIN_X = image.offsetLeft + 4;
const MAX_X = MIN_X + width - 1;
const MIN_Y = image.offsetTop + 4;
const MAX_Y = MIN_Y + height - 1;

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

context.drawImage(image, 0, 0, width, height);

const imageDataData = context.getImageData(0, 0, width, height).data;

function sampleColor(clientX, clientY) {
  if (clientX < MIN_X || clientX > MAX_X || clientY < MIN_Y || clientY > MAX_Y) {
    requestAnimationFrame(() => {
      brush.style.transform = `translate(${ clientX }px, ${ clientY }px)`;
      solidColorCode.innerText = solidColor.style.background = 'rgb(0, 0, 0)';
      alphaColorCode.innerText = alphaColor.style.background = 'rgba(0, 0, 0, 0.00)';
      solidWeightedCode.innerText = solidWeighted.style.background = 'rgb(0, 0, 0)';
    });
    
    return;
  }
  
  const imageX = clientX - MIN_X;
  const imageY = clientY - MIN_Y;
  
  const i = (imageY * width + imageX) * 4;

  // A single pixel (R, G, B, A) will take 4 positions in the array:
  const R = imageDataData[i];
  const G = imageDataData[i + 1];
  const B = imageDataData[i + 2];
  const A = imageDataData[i + 3] / 255;
  const iA = 1 - A;

  // Alpha-weighted color:
  const wR = (R * A + 255 * iA) | 0;
  const wG = (G * A + 255 * iA) | 0;
  const wB = (B * A + 255 * iA) | 0;

  // Update UI:
  
  requestAnimationFrame(() => {
    brush.style.transform = `translate(${ clientX }px, ${ clientY }px)`;

    solidColorCode.innerText = solidColor.style.background
      = `rgb(${ R }, ${ G }, ${ B })`;

    alphaColorCode.innerText = alphaColor.style.background
      = `rgba(${ R }, ${ G }, ${ B }, ${ A.toFixed(2) })`;

    solidWeightedCode.innerText = solidWeighted.style.background
      = `rgb(${ wR }, ${ wG }, ${ wB })`;
  });
}

document.onmousemove = (e) => sampleColor(e.clientX, e.clientY);
  
sampleColor(MIN_X, MIN_Y);

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: none;
  font-family: monospace;
  overflow: hidden;
}

#image {
  border: 4px solid white;
  border-radius: 2px;
  box-shadow: 0 0 32px 0 rgba(0, 0, 0, .25);
  width: 150px;
  box-sizing: border-box;
}

#brush {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  mix-blend-mode: exclusion;
  border-radius: 100%;
}

#brush::before,
#brush::after {
  content: '';
  position: absolute;
  background: magenta;
}

#brush::before {
  top: -16px;
  left: 0;
  height: 33px;
  width: 100%;
}

#brush::after {
  left: -16px;
  top: 0;
  width: 33px;
  height: 100%;
}

#samples {
  position: relative;
  list-style: none;
  padding: 0;
  width: 250px;
}

#samples::before {
  content: '';
  position: absolute;
  top: 0;
  left: 27px;
  width: 2px;
  height: 100%;
  background: black;
  border-radius: 1px;
}

#samples > li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 56px;
}

#samples > li + li {
  margin-top: 8px;
}

.sample {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translate(0, -50%);
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  box-shadow: 0 0 16px 4px rgba(0, 0, 0, .25);  
  margin-right: 8px;
}

.sampleLabel {
  font-weight: bold;
  margin-bottom: 8px;
}

.sampleCode {
  
}

<img id="image" src="data:image/gif;base64,R0lGODlhSwBLAPEAACMfIO0cJAAAAAAAACH/C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIf4jUmVzaXplZCBvbiBodHRwczovL2V6Z2lmLmNvbS9yZXNpemUAIfkEBQAAAgAsAAAAAEsASwAAAv+Uj6mb4A+QY7TaKxvch+MPKpC0eeUUptdomOzJqnLUvnFcl7J6Pzn9I+l2IdfII8DZiCnYsYdK4qRTptAZwQKRVK71CusOgx2nFRrlhMu+33o2NEalC6S9zQvfi3Mlnm9WxeQ396F2+HcQsMjYGEBRVbhy5yOp6OgIeVIHpEnZyYCZ6cklKBJX+Kgg2riqKoayOWl2+VrLmtDqBptIOjZ6K4qAeSrL8PcmHExsgMs2dpyIxPpKvdhM/YxaTMW2PGr9GP76BN3VHTMurh7eoU14jsc+P845Vn6OTb/P/I68iYOfwGv+JOmRNHBfsV5ujA1LqM4eKDoNvXyDqItTxYX/DC9irKBlIhkKGPtFw1JDiMeS7CqWqySPZcKGHH/JHGgIpb6bCl1O0LmT57yCOqoI5UcU0YKjPXmFjMm0ZQ4NIVdGBdZRi9WrjLxJNMY1Yr4dYeuNxWApl1ALHb+KDHrTV1owlriedJgSr4Cybu/9dFiWYAagsqAGVkkzaZTAuqD9ywKWMUG9dCO3u2zWpVzIhpW122utZlrHnTN+Bq2Mqrlnqh8CQ+0Mrq3Kc++q7eo6dlB3rLuh3abPVbbbI2mxBdhWdsZhid8cr0oy9F08q0k5FXSadiyL1mF5z51a8VsQOp3/LlodkBfzmzWf2bOrtfzr48k/1hupDaLa9rUbO+zlwndfaOCURAXRNaCBqBT2BncJakWfTzSYkmCEFr60RX0V8sKaHOltCBJ1tAAFYhHaVVbig3jxp0IBADs=" >

<div id="brush"></div>

<ul id="samples">
  <li>
    <span class="sample" id="solidColor"></span>
    <div class="sampleLabel">solidColor</div>
    <div class="sampleCode" id="solidColorCode">rgb(0, 0, 0)</div>
  </li>
  <li>
    <span class="sample" id="alphaColor"></span>
    <div class="sampleLabel">alphaColor</div>
    <div class="sampleCode" id="alphaColorCode">rgba(0, 0, 0, 0.00)</div>
  </li>
  <li>
    <span class="sample" id="solidWeighted"></span>
    <div class="sampleLabel">solidWeighted (with white)</div>
    <div class="sampleCode" id="solidWeightedCode">rgb(0, 0, 0)</div>
  </li>
</ul>

?? Note I'm using a small data URI to avoid Cross-Originissues if I include an external image or an answer that is larger than allowed if I try to use a longer data URI.

?? 请注意Cross-Origin，如果我尝试使用更长的数据 URI，我将使用小数据 URI 来避免在包含外部图像或大于允许的答案时出现问题。

? These colors look weird, don't they?

? 这些颜色看起来很奇怪，不是吗？

If you move the cursor around the borders of the asterisk shape, you will see sometimes avgSolidColoris red, but the pixel you are sampling looks white. That's because even though the Rcomponent for that pixel might be high, the alpha channel is low, so the color is actually an almost transparent shade of red, but avgSolidColorignores that.

如果围绕星号形状的边界移动光标，您有时会看到avgSolidColor红色，但您采样的像素看起来是白色的。这是因为即使R该像素的分量可能很高，但 alpha 通道很低，所以颜色实际上是几乎透明的红色阴影，但avgSolidColor忽略了这一点。

On the other hand, avgAlphaColorlooks pink. Well, that's actually not true, it just lookspink because we are now using the alpha channel, which makes it semitransparent and allows us to see the background of the page, which in this case is white.

另一方面，avgAlphaColor看起来粉红色。嗯，这实际上不是真的，它只是看起来是粉红色的，因为我们现在正在使用 alpha 通道，这使得它半透明并允许我们看到页面的背景，在这种情况下是白色的。

Alpha-weighted color

Alpha 加权颜色

Then, what can we do to fix this? Well, it turns out we just need to use the alpha channel and its inverse as the weights to calculate the components of our new sample, in this case merging it with white, as that's the color we use as background.

那么，我们可以做些什么来解决这个问题呢？好吧，事实证明我们只需要使用 alpha 通道及其逆作为权重来计算我们新样本的分量，在这种情况下将其与白色合并，因为这是我们用作背景的颜色。

That means that if a pixel is R, G, B, A, where Ais in the interval [0, 1], we will compute the inverse of the alpha channel, iA, and the components of the weighted sample as:

这意味着如果一个像素是R, G, B, A，其中A是在区间 中[0, 1]，我们将计算 alpha 通道的倒数iA，以及加权样本的分量：

const iA = 1 - A;
const wR = (R * A + 255 * iA) | 0;
const wG = (G * A + 255 * iA) | 0;
const wB = (B * A + 255 * iA) | 0;

Note how the more transparent a pixel is (Acloser to 0), the lighter the color.

请注意像素越透明（A接近 0），颜色越浅。

回答by emn178

You can try color-sampler. It's an easy way to pick color in a canvas. See demo.

你可以试试color-sampler。这是在画布中挑选颜色的简单方法。见演示。

回答by Damjan Pavlica

I have a very simple working example of geting pixel color from canvas.

我有一个非常简单的从画布获取像素颜色的工作示例。

First some basic HTML:

首先是一些基本的 HTML：

<canvas id="myCanvas" width="400" height="250" style="background:red;" onmouseover="echoColor(event)">
</canvas>

Then JS to draw something on the Canvas, and to get color:

然后 JS 在 Canvas 上绘制一些东西，并获取颜色：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "black";
ctx.fillRect(10, 10, 50, 50);

function echoColor(e){
    var imgData = ctx.getImageData(e.pageX, e.pageX, 1, 1);
    red = imgData.data[0];
    green = imgData.data[1];
    blue = imgData.data[2];
    alpha = imgData.data[3];
    console.log(red + " " + green + " " + blue + " " + alpha);  
}

Here is a working example, just look at the console.

这是一个工作示例，只需查看控制台即可。

回答by Galen Long

@Wayne Burkett's answeris good. If you wanted to also extract the alpha value to get an rgba color, we could do this:

@Wayne Burkett 的回答很好。如果您还想提取 alpha 值以获得 rgba 颜色，我们可以这样做：

var r = p[0], g = p[1], b = p[2], a = p[3] / 255;
var rgba = "rgb(" + r + "," + g + "," + b + "," + a + ")";

I divided the alpha value by 255 because the ImageData object stores it as an integer between 0 - 255, but most applications (for example, CanvasRenderingContext2D.fillRect()) require colors to be in valid CSS format, where the alpha value is between 0 and 1.

我将 alpha 值除以 255，因为 ImageData 对象将其存储为 0 到 255 之间的整数，但大多数应用程序（例如，CanvasRenderingContext2D.fillRect()）要求颜色采用有效的 CSS 格式，其中 alpha 值介于 0 和 1 之间。

(Also remember that if you extract a transparent color and then draw it back onto the canvas, it will overlay whatever color is there previously. So if you drew the color rgba(0,0,0,0.1)over the same spot 10 times, it would be black.)

（还要记住，如果您提取一种透明颜色然后将其绘制回画布上，它将覆盖之前存在的任何颜色。因此，如果您rgba(0,0,0,0.1)在同一个点上绘制该颜色10 次，它将是黑色的。）