gpt4 book ai didi

javascript - 在鼠标悬停期间在 Canvas 中显示值

转载 作者:行者123 更新时间:2023-11-30 12:20:58 28 4
gpt4 key购买 nike

亲爱的 JavaScript 用户,

我需要能够:

  1. 载入一张png图片并在 Canvas 上显示
  2. 存储其原始像素值
  3. 转换像素值以表示新颜色
  4. 当用户将光标移到图像上时在屏幕上显示原始值

这听起来有点奇怪,但我的实时系统中的原始像素值将包含我需要保留的编码数据,并在随后执行任何像素值操作后显示在屏幕上。我需要在初始加载图像后更改颜色映射以使其更赏心悦目,但需要在屏幕上显示原始值。

我的方法在 Canvas 上显示一些简单的几何形状时有效,但一旦我尝试使用 png 图像,它就会停止工作。谁能帮我理解这是为什么?

这里有一个适用于简单形状的示例(没有像素值转换): http://jsfiddle.net/DV9Bw/1219/

如果您注释掉第 24 - 29 行,并取消注释第 32 - 40 行,以便它以 png 格式加载,它将停止工作。 png 文件加载,但数据值不再显示在屏幕上。

欢迎就我使用 png 时为什么会出现问题提出任何建议;任何关于如何修复它的建议都将更加受欢迎!

非常感谢您的帮助。

大卫

function findPos(obj) {
var curleft = 0, curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return { x: curleft, y: curtop };
}
return undefined;
}

function rgbToHex(r, g, b) {
if (r > 255 || g > 255 || b > 255)
throw "Invalid color component";
return ((r << 16) | (g << 8) | b).toString(16);
}


var example = document.getElementById('example');
var context = example.getContext('2d');


// The squares works
context.fillStyle = "rgb(255,0,0)";
context.fillRect(0, 0, 50, 50);
context.fillStyle = "rgb(0,0,255)";
context.fillRect(55, 0, 50, 50);
// End of squares


/*
// Replacing the squares section above with this
// png image stops the mouseOver from working, Why?
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imageObj.width*4, imageObj.height*4);
};
imageObj.src = 'http://dplatten.co.uk/mouseOver/skin_dose_map.png';
*/


var originalValues = new Array();
originalValues = context.getImageData(0,0,280,360).data;

$('#example').mousemove(function(e) {
var pos = findPos(this);
var x = e.pageX - pos.x;
var y = e.pageY - pos.y;
var coord = "x=" + x + ", y=" + y;
var c = this.getContext('2d');
var r = originalValues[(y*280 + x)*4];
var g = originalValues[(y*280 + x)*4+1];
var b = originalValues[(y*280 + x)*4+2];
$('#status').html(coord + "<br>" + r + "," + g + "," + b);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="example" width="280" height="360"></canvas>
<div id="status"></div>

最佳答案

问题是双重的

首先,这两行:

var originalValues = new Array();
originalValues = context.getImageData(0,0,280,360).data;

在您绘制图像之前正在运行,因为它正在等待图像加载静止。

然后,如果将 context.getImageData() 移动到 imgObject.onload 函数内部,您会遇到另一个问题,即您无法在不在同一位置的图像上运行 getImageData()作为运行脚本的文件。您将收到以下消息:

未捕获的安全错误:无法在“CanvasRenderingContext2D”上执行“getImageData”: Canvas 已被跨源数据污染。

如果您将图像放在同一台服务器上并将 getImageData() 调用移到 onload 函数中,它应该可以工作。

关于javascript - 在鼠标悬停期间在 Canvas 中显示值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31103683/

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