gpt4 book ai didi

javascript - 使用 JavaScript 或 jQuery,如何在
元素中特别是鼠标移动的地方获取 RGB 颜色

转载 作者:数据小太阳 更新时间:2023-10-29 05:20:00 24 4
gpt4 key购买 nike

我有一张图片,<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 元素而不是 canvas 元素,您可以:

  1. 动态创建一个与 img 具有相同大小和相同位置的 Canvas 元素。
  2. 通过 Canvas 上下文中的 drawImage 方法将图像数据从 img 复制到 Canvas 。
  3. 隐藏 img 元素,将 Canvas 留在原处。

关于javascript - 使用 JavaScript 或 jQuery,如何在 <img> 或 <div> 元素中特别是鼠标移动的地方获取 RGB 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7985722/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com