Javascript 使用inspect元素上载图像

一旦用户点击遮罩图像，我们将显示文件上传对话框

我们正在使用以下代码进行单击：

$('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) {
            // click only inside Non Transparent part
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });

$('.container').click(function(e) {
        // filtering out non-canvas clicks
        if (e.target.tagName !== 'CANVAS') return;

        // getting absolute points relative to container
        const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
        const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

        const $canvasList = $(this).find('canvas');
        // moving all canvas parents on the same z-index
        $canvasList.parent().css({
            zIndex: 0
        });

        $canvasList.filter(function() { // filtering only applicable canvases
            const bbox = this.getBoundingClientRect()
            return (
                absX >= bbox.left && absX <= bbox.left + bbox.width &&
                absY >= bbox.top && absY <= bbox.top + bbox.height)
        }).each(function() { // checking white in a click position
            const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
            const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
            const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
            if (pixel[3] === 255) {
                $(this).parent().css({
                    zIndex: 2
                })
                target = this.id;
                console.log(target);
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        })
    });

问题：

由于某些原因，我们没有使用上述代码，而是使用以下代码进行单击：

$('.container').click(function(e) {

        var res = e.target;
        target = res.id;
        console.log(target);
        if (e.target.getContext) {
            // click only inside Non Transparent part
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });

$('.container').click(function(e) {
        // filtering out non-canvas clicks
        if (e.target.tagName !== 'CANVAS') return;

        // getting absolute points relative to container
        const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
        const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

        const $canvasList = $(this).find('canvas');
        // moving all canvas parents on the same z-index
        $canvasList.parent().css({
            zIndex: 0
        });

        $canvasList.filter(function() { // filtering only applicable canvases
            const bbox = this.getBoundingClientRect()
            return (
                absX >= bbox.left && absX <= bbox.left + bbox.width &&
                absY >= bbox.top && absY <= bbox.top + bbox.height)
        }).each(function() { // checking white in a click position
            const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
            const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
            const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
            if (pixel[3] === 255) {
                $(this).parent().css({
                    zIndex: 2
                })
                target = this.id;
                console.log(target);
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        })
    });

---

这是由于滚动位置发生了变化，边界框的计算与滚动位置无关。我已经把剧本修改好了

        $canvasList.filter(function() { // filtering only applicable canvases
            const bbox = this.getBoundingClientRect();
            const canvasTop = bbox.top + window.scrollY;
            const canvasLeft = bbox.left + window.scrollX;
            return (
                absX >= canvasLeft && absX <= canvasLeft + bbox.width &&
                absY >= canvasTop && absY <= canvasTop + bbox.height)
        })

.temp{
背景：黑色；
}
.集装箱{
背景：金；
位置：相对位置；
}
.蒙面img{
溢出：隐藏；
位置：相对位置；
}

---

这是由于滚动位置发生了变化，边界框的计算与滚动位置无关。我已经把剧本修改好了

        $canvasList.filter(function() { // filtering only applicable canvases
            const bbox = this.getBoundingClientRect();
            const canvasTop = bbox.top + window.scrollY;
            const canvasLeft = bbox.left + window.scrollX;
            return (
                absX >= canvasLeft && absX <= canvasLeft + bbox.width &&
                absY >= canvasTop && absY <= canvasTop + bbox.height)
        })

.temp{
背景：黑色；
}
.集装箱{
背景：金；
位置：相对位置；
}
.蒙面img{
溢出：隐藏；
位置：相对位置；
}