Question

亲爱的JavaScript用户，

我需要能够：

加载png图像并将其显示在画布上
存储其原始像素值
转换像素值以表示新颜色
当用户将光标移到图像上时，在屏幕上显示原始值

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

我的方法在画布上显示一些简单的几何形状时起作用，但是一旦我尝试使用png图像就停止工作。谁能帮我理解为什么会这样？

使用简单形状的示例（没有像素值转换）在这里： http://jsfiddle.net/DV9Bw/1219/

如果您注释掉第24 - 29行，并取消注释第32 - 40行，使其加载到png中，它就会停止工作。 png文件加载，但屏幕上不再显示数据值。

当我使用png时，任何关于它为什么会中断的建议都会受到欢迎;任何关于如何修复它的建议都会更受欢迎！

非常感谢您的任何帮助。

大卫

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

Answer 1

问题是双重的

首先，这两行：

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

在绘制图像之前正在运行

，因为它正在等待图像加载静止。

然后，如果将context.getImageData（）移动到imgObject.onload-function中，你会遇到另一个问题，即你不能在不在同一位置的图像上运行getImageData（）作为运行脚本的文件。您将收到以下消息：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

如果将图像放在同一台服务器上并在onload-function中移动getImageData（）调用，它应该可以工作。

鼠标悬停期间在画布中显示值

1 个答案: