简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Help with canvas drawing mosaic problem, color selection is always inaccurate
三叔
三叔 2017-06-08 11:03:00
0
2
871

When drawing with the mouse, take the color value of the current area of ​​the mouse, and then set the color of the brush. However, the color selection is always very different. I don’t know if there is something wrong with my calculation. Please help! 

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<title></title>
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box {
            position: fixed;
            top: 300px;
        }
        img {
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <p class="box">
        <button id="create">生成</button>
        <button id="clear">清除</button>
    </p>

    <canvas id="canvas"></canvas>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        //    本地图片路径
        var imgSrc = 'img/aaa.png';
        var height = 300;
        var width = 480;
        
        //将图片分成100份
        var xW = width / 100;
        var yH = height / 100;
        var clip = new mosaic(height, width, imgSrc);

        function mosaic(height, width, src) {
            var img = new Image();
            var canvas = $('#canvas')[0];
            var ctx = canvas.getContext('2d');
            
            img.addEventListener('load', function (e) {
                var mousedown = false,
                    offsetX = canvas.offsetLeft,
                    offsetY = canvas.offsetTop;

                canvas.width = width;
                canvas.height = height;

                ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);

                $('#clear').on('click', function () {
                    ctx.drawImage(img, 0, 0, width, height, 0, 0, width, height);
                });

                $('#create').on('click', function () {
                    var images = new Image();
                    images.onload = function () {
                        $('body').append(images);
                    }
                    images.src = canvas.toDataURL()
                });

                // 计算当前鼠标坐标值在这个100份格子中的位置
                function getPos(x, y){
                    var px, py;
                    var result = {x, y};
                    var posArr = createPosArr();
          
                    for(var i = 0; i < posArr.length; i++){
                        px = posArr[i].x;
                        py = posArr[i].y;
                        if(x >= px){
                            result.x = posArr[i].x;
                            continue;
                        }
                    }

                    for(var i = 0; i < posArr.length; i++){
                        px = posArr[i].x;
                        py = posArr[i].y;
                        if(y >= py){
                            result.y = posArr[i].y;
                            continue;
                        }
                    }

                    return result;
                }

                function createPosArr(){
                    var arr = [];
                    for(var i = 0; i < 100; i++){
                        arr.push({
                            x: i * xW,
                            y: i * yH
                        });
                    }
                    return arr;
                }

                function down(e) {
                    e.preventDefault();
                    mousedown = true;
                }

                function up(e) {
                    e.preventDefault();
                    mousedown = false;
                }

                function move(e) {
                    if(!mousedown){return;}
                    e.preventDefault();
                    
                    // 如果鼠标按下
                    if (mousedown) {
                        var pos = getPos(e.clientX, e.clientY);
                        console.log(pos);
                        var imgData = ctx.getImageData(pos.x, pos.y, 5, 5);
                        var red   = imgData.data[0];
                        var green = imgData.data[1];
                        var blue  = imgData.data[2];
                        var alpha = imgData.data[3] / 255;

                        ctx.fillStyle = 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha / 2 + ')'
                        ctx.fillRect(pos.x, pos.y, 10, 10);
                    }
                }

                // 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
                // ctx.globalCompositeOperation = 'destination-out';
                canvas.addEventListener('mousedown', down);
                canvas.addEventListener('mousemove', move);
                canvas.addEventListener('mouseup', up);
            });

            img.src = src;
        }
    </script>
</body>

</html>
三叔
三叔

reply all(2)
代言
代言2017-06-08 11:05:00 2 floor

You can try calculating the average color within the grid.
To get the average value, you can refer to: https://github.com/JackGit/ca...

Like +0
Add Reply
漂亮男人
漂亮男人2017-06-08 11:05:00 1 floor

When taking the color of the current coordinates, set the width and height to 1PX?
var imgData = ctx.getImageData(pos.x, pos.y, 1, 1);
I happen to be working on this too,
https://github.com/S-mohan/ca...

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！