Javascript getImageData（）在平移/缩放画布时返回错误数据（仅限物理移动设备问题） 背景：

我正在使用Andrei Kashcha（anvaka）的panzoom库：提供详细的颜色拾取功能：

我已经制作了一部1英尺长的电影来说明这个用例：

问题: -第一部分[已解决，未解决的第二部分见下文]

//14-12-2020：初始职位

这一切都可以在桌面上的Chrome/Safari上正常工作，但是当切换到移动设备时，我在touchend（_listener2）上收到以下错误：

更具体地说，下面是我分享的代码的以下部分：

var p = inst.canvas.getContext('2d')
                .getImageData(x, y, 1, 1).data;

我的假设是，这个错误也会在touchmove（_listener4）上出现，但我无法用Chrome的内置移动设备模式正确测试这个错误。我也无法访问XCode，这使得在Safari中进行测试也很困难

//29/12：更新

同时，我发现以下代码导致了ReferenceError：

// chrome
if(e.offsetX) {
    x = e.offsetX;
    y = e.offsetY; 
}
// firefox
else if(e.layerX) {
    x = e.layerX;
    y = e.layerY;
}

将此替换为以下内容，解决了我的问题

x = e.changedTouches[0].clientX - e.changedTouches[0].target.offsetLeft
y = e.changedTouches[0].clientY - e.changedTouches[0].target.offsetTop;

-第二部分[未解决]

//14-12-2020：初始职位

在移动设备上缩放/平移并随后在移动设备上选择颜色时，所做的颜色选择似乎基于尚未缩放/平移的画布

我已经试过很多东西了，但我就是想不出来。尽管其他公司也尝试过同样的方法：

我也无法使用该输入来解决我的问题

//29-12-2020：更新

到今天为止，我仍然无法解决问题的第二部分

比较时

console.log(inst.canvas);
console.log(inst.canvas.getContext('2d'))

对于移动设备和桌面设备，我看不到任何区别，所以在移动设备上，我无法通过getImageData（）检索正确的数据，这真的很奇怪。如何确保getImageData（）实际检查缩放/缩放/平移图像（画布），而不是未缩放/未缩放/未平移图像（画布）？这将有助于我进一步调试

//05-04-2021：更新

我还没有弄清楚是什么导致了这个问题。还有三个关键问题：

• 问题1：我是否正确使用了drawImage（）
• 问题2：我是否正确使用了getImageData（）
• 问题3：无论第一季度还是第二季度，为什么它在桌面上工作 那么

//2021年5月15日：更新

我还没有弄清楚是什么导致了这个问题。同样的关键问题仍然存在，但我在调查方面取得了一些进展：

• 问题1：我是否正确使用了drawImage（）

我现在尝试使用void ctx.drawImage（image、sx、sy、sWidth、sHeight、dx、dy、dWidth、dHeight）；代替void ctx.drawImage（image，dx，dy，dWidth，dHeight）；在阅读了关于MDN的文档之后，这似乎更符合逻辑：不幸的是，这并没有太大的变化。我更新了下面的可视化，以反映我的调整

• 问题2：我是否正确使用了getImageData（）

我不知道这里会出什么问题

• 问题3：无论第一季度还是第二季度，为什么它在桌面上工作 那么

我也在智能手机模拟器上测试了我的实现：它的工作方式很有魅力。因此，真正导致问题的是物理设备

可视化：

内部尺寸为2075x3112的TestImages加载到宽度为375、高度为562的画布中-这是左侧的情况。右侧的情况描述了平移/缩放后发生的情况

片段：

• drawImage（）：在平移/缩放时调用

• getImageData（）

\u listener2=函数（e）{//touchend
//console.log（e.src元素）
t长度=e.长度；
cpsig1=cpsig1+t长度toString（）；
如果（t长度===0）{
如果（（tf.x<-1E-9 | tf.x>1E-9）| |（tf.y<-1E-9 | tf.y>1E-9）| | tf.scale>1）{//平移或缩放为真
//再次激活CP
activateCP=true；
//等待下一个用户操作执行某些操作（例如，单击/点击）
if（cpsig1.slice（cpsig1.length-2）=“00”）{
registerC=true；
}否则{
registerC=false；
}
}否则{
//检查我们是否来自“转化”情况，如果是，请不要设置颜色。
如果（transform==true）{//我们来自一个“transformed”的情况
registerC=false；//我们等待用户操作
变换=假；
//tmpvar=true；
}else{//注册在转到TE=0之前接触的基础颜色，并移动到下一种颜色（此处registerC应为true）
//额外手柄
if（cpsig1.slice（cpsig1.length-2）=“20”）{
registerC=false；
}否则{
registerC=true；
}
}
}
}
//铬
如果（e.offsetX）{
x=e.offsetX；
y=e.offsetY；
}
//火狐
否则如果（如layerX）{
x=e.rx；
y=e.分层；
}
useCanvas（inst.canvas、inst.img、function（）{
//获取图像数据
//log（“调试：”）
//控制台日志（inst.img）；
//控制台日志（inst.canvas）；
//console.log（inst.canvas.getContext（'2d'））
//https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
var p=inst.canvas.getContext（'2d'）
.getImageData（x，y，1，1）。数据；
//显示信息
inst.result_hex=rgbToHex（p[0]，p[1]，p[2]）；
inst.result_rgb_string='rgb（'+p[0]+'、'+p[1]+'、'+p[2]+'）；
console.log(inst.canvas);
console.log(inst.canvas.getContext('2d'))

function useCanvas(el, image, callback){
    console.log("useCanvas")
    console.log(image);
    //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
    //console.log(el.width);
    //console.log(el.height);
    if(!checkCanvasSize(el, image)){
        console.log("checkCanvasSize")
        el.width = image.width; // img width
        el.height = image.height; // img height

        console.log(el.width);
        console.log(el.height);
        
        // draw image in canvas tag - void ctx.drawImage(image, dx, dy, dWidth, dHeight);
        el.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
        console.log(el)
        console.log(el.getContext('2d'))
    } else {
        console.log("else ...")
        console.log(image.style.transform)
        //if no transformation - do nothing
        //if transformation - do "something"
        if(image.style.transform !== "matrix(1, 0, 0, 1, 0, 0)"){
            //- draw transformed image onto canvas
            el.getContext('2d').drawImage(image, 0, 0, image.width, image.height);
        }
    }
    return callback();
}


_listener2 = function(e) { //touchend

        //console.log(e.srcElement)
        tlength = e.touches.length;
        cpsig1 = cpsig1 + tlength.toString();
        if(tlength === 0){

            if( (tf.x < -1E-9 || tf.x > 1E-9) || (tf.y < -1E-9 || tf.y > 1E-9) || tf.scale > 1){ //pan or zoom is true
                //activate CP again
                activateCP = true;
                //wait for the next user action to do something (e.g. click/tap)
                if(cpsig1.slice(cpsig1.length - 2) === "00"){
                    registerC = true;
                } else {
                    registerC = false;
                }
            } else { 
                //perform a check whether we came from a 'transformed' situation or not, in case yes, don't set the color.
                if(transform === true){ //we came from a 'transformed' situation
                    registerC = false; //we wait for a user action
                    transform = false;
                    //tmpvar = true;
                } else { //register the underlying color that was touched before going to TE=0 and move to next color (registerC should be true here)
                    //extra handle
                    if(cpsig1.slice(cpsig1.length - 2) === "20"){
                        registerC = false;
                    } else {
                        registerC = true;
                    }
                    
                }
            }

            
        }

        // chrome
        if(e.offsetX) {
            x = e.offsetX;
            y = e.offsetY; 
        }
        // firefox
        else if(e.layerX) {
            x = e.layerX;
            y = e.layerY;
        }
        useCanvas(inst.canvas, inst.img, function(){
            // get image data
            //console.log("Debug:")
            //console.log(inst.img);
            //console.log(inst.canvas);
            //console.log(inst.canvas.getContext('2d'))
            //https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
            var p = inst.canvas.getContext('2d')
                .getImageData(x, y, 1, 1).data;
                        
            // show info
            inst.result_hex = rgbToHex(p[0],p[1],p[2]);
            inst.result_rgb_string = 'rgb('+p[0]+','+ p[1]+','+ p[2]+')';
            
            // set value
            console.log("skinSelection: ", skinSelection)
            if(skinSelection === false && tlength === 0 && registerC === true){
                document.getElementById("preview_skin").style.backgroundColor = rgbToHex(p[0],p[1],p[2]);
                document.getElementById("preview_skin").style.backgroundSize = "42.5px 42.5px"
                document.getElementById("preview_skin").style.backgroundImage = "url('https://static.wixstatic.com/media/3e929c_000c0389ad654985be5d7983694c7695~mv2.png')";
                document.getElementById("preview_skin").style.backgroundRepeat = "no-repeat"
                document.getElementById("preview_skin").style.backgroundPosition = "center 50%"
                skinSelection = true;
                document.getElementById('preview_skin').style.border = "5px solid #fff";
            } else {
                if(hairSelection === false && tlength === 0 && registerC === true){
                    document.getElementById("preview_hair").style.backgroundColor = rgbToHex(p[0],p[1],p[2]);
                    document.getElementById("preview_hair").style.backgroundSize = "42.5px 42.5px"
                    document.getElementById("preview_hair").style.backgroundImage = "url('https://static.wixstatic.com/media/3e929c_cad76816bc4441b6bfe34f5008b2741d~mv2.png')";
                    document.getElementById("preview_hair").style.backgroundRepeat = "no-repeat"
                    document.getElementById("preview_hair").style.backgroundPosition = "center 50%"
                    hairSelection = true;
                    document.getElementById('preview_hair').style.border = "5px solid #fff"
                } else {
                    if(eyeSelection === false && tlength === 0 && registerC === true){
                        document.getElementById("preview_eye").style.backgroundColor = rgbToHex(p[0],p[1],p[2]);
                        document.getElementById("preview_eye").style.backgroundSize = "42.5px 42.5px"
                        document.getElementById("preview_eye").style.backgroundImage = "url('https://static.wixstatic.com/media/3e929c_f628dfa5fe0a412da6f06954a8657458~mv2.png')";
                        document.getElementById("preview_eye").style.backgroundRepeat = "no-repeat"
                        document.getElementById("preview_eye").style.backgroundPosition = "center 50%"
                        eyeSelection = true;
                        document.getElementById('preview_eye').style.border = "5px solid #fff"
                    }
                }

            }
            console.log("R: " + p[0] + " - G: " + p[1] + " - B: " + p[2]);
        });
    }