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

这篇具有很好参考价值的文章主要介绍了js使用canvas实现图片鼠标滚轮放大缩小拖拽预览，显示像素坐标，显示像素值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html代码

todo 实现画矩形框，圆形roi文章来源地址https://www.toymoban.com/news/detail-848156.html

<!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>

到了这里，关于js使用canvas实现图片鼠标滚轮放大缩小拖拽预览，显示像素坐标，显示像素值的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！