<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas 获取图像颜色</title>
<style>
body {
transition: background ease 0.2s;
text-align: center;
padding: 0;
margin: 0;
}
#cursor {
width: 9px;
height: 9px;
position: absolute;
}
#cursor::before,
#cursor::after {
content: '';
position: absolute;
background-color: #000;
}
#cursor::before {
left: 4px;
top: 0;
width: 1px;
height: 9px;
}
#cursor::after {
top: 4px;
left: 0;
width: 9px;
height: 1px;
}
</style>
</head>
<body>
<h2>点击图片任意位置</h2>
<h3 id="output"></h3>
<script>
window.addEventListener('load', function () {
// 将 img 绘制在 canvas 中
function draw (img) {
var style = window.getComputedStyle(img);
var width = parseInt(style.width, 10);
var height = parseInt(style.height, 10);
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// 获取坐标颜色
function getPixelColor (x, y) {
var imageData = ctx.getImageData(x, y, 1, 1);
console.log(imageData, 222222222)
var pixel = imageData.data;
var r = pixel[0];
var g = pixel[1];
var b = pixel[2];
var a = pixel[3] / 255;
a = Math.round(a * 100) / 100;
var rHex = r.toString(16);
r < 16 && (rHex = "0" + rHex);
var gHex = g.toString(16);
g < 16 && (gHex = "0" + gHex);
var bHex = b.toString(16);
b < 16 && (bHex = "0" + bHex);
var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
var hexColor = "#" + rHex + gHex + bHex;
return {
rgba: rgbaColor,
rgb: rgbColor,
hex: hexColor,
r: r,
g: g,
b: b,
a: a
};
}
return {
getColor: getPixelColor,
};
};
// 点击位置绘制一个十字坐标
function setCursor (x, y) {
// <div id="cursor" class="cursor"></div>
var cursor = document.getElementById('cursor');
if (!cursor) {
cursor = document.createElement('div');
cursor.id = 'cursor';
document.body.appendChild(cursor);
}
cursor.style.left = x - 4 + 'px';
cursor.style.top = y - 4 + 'px';
}
// var img = document.getElementById('img');
var output = document.getElementById('output');
var img = new Image();
img.crossOrigin = '';
img.onload = function () {
document.body.appendChild(img)
var canvas = draw(img);
img.addEventListener('click', function (e) {
var x = e.offsetX;
var y = e.offsetY;
setCursor(e.pageX, e.pageY);
var color = (canvas.getColor(x, y)).rgba;
document.body.style.background = color;
output.innerHTML = '坐标点颜色:' + color;
});
};
img.src = 'https://upload.jianshu.io/users/upload_avatars/1971769/aae6b929-375b-4604-a464-01cee188d63a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240'
});
</script>
</body>
</html>
点击图片获取当前色值
最新推荐文章于 2024-03-03 22:32:56 发布