我有一张图片<img src="/meAndMy/face.jpg" />.无论何时何地移动我的鼠标光标,我都试图获得RGB颜色.
我怎么能用jQuery或纯JavaScript做到这一点？例如:http://www.script-tutorials.com/demos/158/index.html
跟进(用于复制粘贴测试):
<?=$this->headScript(); ?>
<script>
$(document).ready(function()
{
var image = new Image();
var ctx = $('#panel')[0].getContext("2d");
/* Load the picture empty.jpg */
image.onload = function ()
{
ctx.drawImage(image, 0, 0, image.width, image.height);
}
/* How can i reload later new?
image.empty; */
image.src = "/agents/empty.jpg";
/* On mouse over to my image, show me the background with RGB
change mousemove to click if requires */
$('#panel').mousemove(function(e)
{
/* Leave as it is */
var canvasOffset = $(this).offset();
var canvasX = Math.floor(e.pageX - canvasOffset.left);
var canvasY = Math.floor(e.pageY - canvasOffset.top);
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
var pixelColor = "rgba("+pixel[0]+", "+pixel[1]+", "+pixel[2]+", "+pixel[3]+")";
/* Meat */
$(document.body).css('background-color',pixelColor);
});
});
</script>
<body>
<canvas id="panel" width="500" height="333"></canvas>
<body>
您可以像该演示的脚本那样执行此操作.请注意,该演示不使用img元素,而是将图像加载到canvas元素中.canvas API允许您像这样获取像素数据:
var imageData = ctx.getImageData(canvasX, canvasY, 1, 1);
var pixel = imageData.data;
有关详细信息,请参阅HTML 5 canvas API.
如果出于某种原因需要将图像加载到img元素中,而不是画布元素,则可以: