github: https://github.com/dujingya/getCavasColor
直接贴代码，自己找一张图片来试试就可以，本地图片肯定没问题，在线图片要看是否允许跨域，如果是自己服务器上的图片，要后台处理下跨域问题
前端代码里已经处理过了，但是后端还是需要处理
<!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 = 'http://a0.att.hudong.com/27/10/01300000324235124757108108752.jpg'
img.src = './bg.jpg'
});
</script>
</body>
</html>
网友评论