Cordova iOS - CANVAS获取像素颜色无法正常工作（RETINA尺寸）

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而不是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.style.width  = "300px";
canvas.style.height = "480px";

是画布元素（不是位图）浏览器中的 display 大小。如果大小与位图大小不同，则仅调整位图大小以用于显示目的。位图在内部仍然具有相同的大小。可以认为画布等于图像差异，因为画布是可编辑的，而图像则不是。

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

IE中。点击元素上的点[600,600]也会在位图上显示[600,600]，但由于位图只有一半大小，因此点位于位图之外。

同样，在canvas元素上点[300,300]也会在位图上[300,300]，但是在位图上它会在右边缘，所以当这里的像素被改变时，那个像素是缩放显示尺寸，最终会在边缘处结束，而不是最初点击点的位置。

尝试缩放点击位置以获得正确的像素：

将它们放在全局中（如果需要，可以在画布中调整大小）：

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

（这与触摸的代码相同，只需使用触摸点集合。）