javascript - Cordova iOS - CANVAS 获取像素颜色无法正常工作(视网膜尺寸)

Question

在我的应用程序中，用户从库中加载照片，显示它，然后点击它即可获取点击像素的颜色。

我正在使用此片段的变体(第一个答案)Get pixel color from canvas, on mouseover获取像素颜色。

如果我使用非视网膜尺寸，这确实有效:

var canvas = document.getElementById("myCanvas");
canvas.width = 300;
canvas.height = 480;
canvas.style.width = "300px";
canvas.style.height = "480px";

canvas.drawImage(img, 0, 0); 

相机API:

navigator.camera.getPicture(funcSuccess, funcError, { quality: 100, targetWidth: 300,
                                    targetHeight: 480, destinationType: destinationType.FILE_URI, sourceType: source });

但是一旦我将视网膜尺寸加倍，它总是会返回错误的颜色。 (就像它期望图像在 600x960 Canvas 中显示为 600x960 而不是 300x480，...我不知道)

var canvas = document.getElementById("myCanvas");
canvas.width = 600;
canvas.height = 960;
canvas.style.width = "300px";
canvas.style.height = "480px";

canvas.drawImage(img, 0, 0); 

相机API:

navigator.camera.getPicture(funcSuccess, funcError, { quality: 100, targetWidth: 600,
                                    targetHeight: 960, destinationType: destinationType.FILE_URI, sourceType: source });

我感谢每一个回复。谢谢。

Answer 1

这些

canvas.width  = 300;
canvas.height = 480;

是 Canvas 使用的位图的实际大小。你对 Canvas 所做的一切都与这些相关。

还有这些

canvas.style.width  = "300px";
canvas.style.height = "480px";

是 Canvas 元素(不是位图)在浏览器中的显示尺寸。如果大小与位图大小不同，则仅出于显示目的调整位图大小。位图内部的大小仍然相同。将 Canvas 视为等于图像，区别在于 Canvas 是可编辑的，而图像则不可编辑。

这意味着您对 Canvas 元素执行的所有操作都必须缩放以适应位图大小，以防它们不相同，包括鼠标/触摸位置，因为您获得的 x 和 y 位置鼠标事件是相对于元素的。

即。单击元素上的点 [600, 600] 也会位图上的 [600, 600]，但由于位图只有一半大小，因此该点将位于位图之外。

同样，单击 Canvas 元素上的点 [300, 300] 也会位图上的 [300, 300]，但在位图上它将位于右边缘，因此当此处的像素更改时，该像素将变为缩放到显示尺寸，最终也会出现在边缘，而不是最初单击点的位置。

尝试缩放您的点击位置以获得正确的像素，如下所示:

将它们放在全局中(并在需要时更新 Canvas 调整大小):

xScale = canvas.width  / canvas.offsetWidth;  
yScale = canvas.height / canvas.offsetHeight;

在你的鼠标事件处理程序中:

function handleMouse(e) {

    var r = canvas.getBoundingClientRect(),
        x = (e.clientX - r.left) * xScale ;
        y = (e.clientY - r.top)  * yScale ;

    ... rest of code goes here ...
}

(与触摸代码大致相同，只是使用触摸点集合)。