js使用canvas实现图片鼠标滚轮放大缩小拖拽预览，显示像素坐标，显示像素值

isyoungboy

已于 2024-03-14 13:47:36 修改

阅读量1.4k

点赞数 4

文章标签： javascript 前端开发语言

于 2024-03-13 16:39:38 首次发布

本文链接：https://blog.csdn.net/isyoungboy/article/details/136684477

版权

html代码

todo 实现画矩形框，圆形roi

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Image Viewer</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<div>
    <button id="loadImageButton">Load Image</button>
</div>
<canvas id="mainCanvas" width="900" height="800"></canvas>

<div>
    <span>坐标</span>
    <span id="imageXY"></span>
    <div>
        <span id="imagePix"></span>
    </div>
</div>

<script>
    const canvas = document.getElementById('mainCanvas');
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    let imageObj = new Image();
    let imageWidth;
    let imageHeight;
    let scale = 1;
    let offsetX = 0;
    let offsetY = 0;
    let pixdata;
    canvas.addEventListener('mousedown', mouseDownListener);
    canvas.addEventListener('mouseup', mouseUpListener);
    canvas.addEventListener('mousemove', mouseMoveListener);
    canvas.addEventListener('mousewheel', mouseWheelListener);
    document.getElementById('loadImageButton').addEventListener('click', loadImage);



    function initPixData(image){
        const canvasHide = document.createElement('canvas');
        const context = canvasHide.getContext('2d');
        canvasHide.width = image.width;
        canvasHide.height = image.height;
        context.drawImage(image, 0, 0);
        const imageData = context.getImageData(0, 0, image.width, image.height);
        pixdata = imageData.data;
        console.log(pixdata)
    }

    function getPixelValue(x, y) {
        

        let pixelValue;
        if (pixdata.length === 4) {
            pixelValue = {
                red: pixel[0],
                green: pixel[1],
                blue: pixel[2],
                alpha: pixel[3]
            };
        } else if (ipixdata.length === 1) {
            pixelValue = {
                gray: pixel[0]
            };
        } else {
            throw new Error('Unsupported image format');
        }

        return pixelValue;
    }


    function loadImage() {
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*';
        input.click();
        input.onchange = e => {
            const file = e.target.files[0];
            const reader = new FileReader();
            reader.onload = readerEvent => {
                const url = readerEvent.target.result;
                imageObj.src = url;
            };
            reader.readAsDataURL(file);
        };
    }

    let isDragging = false;
    let lastX;
    let lastY;
    function mouseDownListener(e) {
        let rect = canvas.getBoundingClientRect();
        isDragging = true;
        lastX = e.clientX - rect.left;
        lastY = e.clientY - rect.top;
    }
    function mouseUpListener(e) {
        isDragging = false;
    }
    function mouseMoveListener(e) {
        if (isDragging) {
            let rect = canvas.getBoundingClientRect();
            offsetX += (e.clientX - rect.left) - lastX;
            offsetY += (e.clientY - rect.top) - lastY;
            lastX = e.clientX - rect.left;
            lastY = e.clientY - rect.top;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawImage();
        }
        showImageXY(e);
    }

    function mouseWheelListener(e) {
        let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        if (scale > 0.1 && scale < 10 && delta < 0) {
            scale *= 0.9;
        }
        if (scale > 0.1 && scale < 10 && delta > 0) {
            scale *= 1.1;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawImage();
    }


    function createBlock(a, b, r) {
        let rect = canvas.getBoundingClientRect();
        let canvasX = (a * scale) + offsetX + rect.left;
        let canvasY = (b * scale) + offsetY + rect.top;
        let radius=r*scale;
        ctx.beginPath();
        ctx.fillStyle = 'red';
        ctx.arc(canvasX, canvasY, radius, 0, Math.PI * 2);
        ctx.fill();

    }

    function drawImage() {
        ctx.drawImage(imageObj, 
            offsetX, 
            offsetY,
            imageWidth * scale,
            imageHeight * scale);
        createBlock(200,200,200)
    }


    //计算当前鼠标坐标对应的图片里的像素坐标
    function showImageXY(e) {
        let rect = canvas.getBoundingClientRect();
        let x=(e.clientX - rect.left- offsetX)/scale
        let y=(e.clientY- rect.top - offsetY)/scale
        
        x=Math.round(x)
        y=Math.round(y)
        if(x<0 || x>imageWidth){
            x="-"
        }

        if(y<0 || y>imageHeight){
            y="-"
        }
        if(!(x=='-'|| y=='-')){
            showImagePixVal(x,y);
        }
        

        document.getElementById("imageXY").innerText = `x=${x} y=${y} xInCanvas=${offsetX} yInCanvas=${offsetY} width=${imageWidth} height=${imageHeight}`;
    }

    function showImagePixVal(x,y){
        let idx=((y * (imageWidth * 4)) + (x * 4));
        if(pixdata){
            let r=pixdata[idx]
            let g=pixdata[idx+1]
            let b=pixdata[idx+2]
            let a=pixdata[idx+3]
            document.getElementById("imagePix").innerText = `r=${r} g=${g} b=${b} a=${a}`;
        }
        
    }

    

    imageObj.onload = () => {
        imageWidth = imageObj.width;
        imageHeight = imageObj.height;
        drawImage();
        initPixData(imageObj);
    }
</script>
</body>
</html>