Canvas获取与设置像素详解，掌握像素颜色读取、颜色拾取器、像素绘制等实用技巧。通过像素操作可以实现颜色拾取、像素级绘图等功能。
function getPixel(ctx, x, y) {
const imageData = ctx.getImageData(x, y, 1, 1)
const data = imageData.data
return {
r: data[0],
g: data[1],
b: data[2],
a: data[3]
}
}
function setPixel(ctx, x, y, r, g, b, a = 255) {
const imageData = ctx.createImageData(1, 1)
imageData.data[0] = r
imageData.data[1] = g
imageData.data[2] = b
imageData.data[3] = a
ctx.putImageData(imageData, x, y)
}
function getPixels(ctx, x, y, width, height) {
const imageData = ctx.getImageData(x, y, width, height)
const data = imageData.data
const pixels = []
for (let i = 0; i < data.length; i += 4) {
pixels.push({
r: data[i],
g: data[i + 1],
b: data[i + 2],
a: data[i + 3]
})
}
return pixels
}
function setPixels(ctx, x, y, width, height, pixels) {
const imageData = ctx.createImageData(width, height)
const data = imageData.data
pixels.forEach((pixel, i) => {
const index = i * 4
data[index] = pixel.r
data[index + 1] = pixel.g
data[index + 2] = pixel.b
data[index + 3] = pixel.a !== undefined ? pixel.a : 255
})
ctx.putImageData(imageData, x, y)
}
function rgbToHex(r, g, b) {
const toHex = (n) => {
const hex = n.toString(16)
return hex.length === 1 ? '0' + hex : hex
}
return '#' + toHex(r) + toHex(g) + toHex(b)
}
// 使用示例
const color = getPixel(ctx, 50, 50)
const hex = rgbToHex(color.r, color.g, color.b)
console.log(hex) // #e74c3c
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null
}
// 使用示例
const rgb = hexToRgb('#e74c3c')
console.log(rgb) // { r: 231, g: 76, b: 60 }
function comparePixels(pixel1, pixel2, tolerance = 0) {
return Math.abs(pixel1.r - pixel2.r) <= tolerance &&
Math.abs(pixel1.g - pixel2.g) <= tolerance &&
Math.abs(pixel1.b - pixel2.b) <= tolerance
}
性能考虑
频繁获取单个像素效率低，应批量获取。
跨域限制
跨域图像无法获取像素数据。
坐标范围
确保坐标在画布范围内。