用 html canvas的getImageData()方法获取输入文字的xy坐标_canvas 可以自动获取文字路径吗-CSDN博客

本文链接：https://blog.csdn.net/qq_39237554/article/details/113748509

用 getImageData() 方法返回一个ImageData类, 循环类里的data数组, 其中数组的数量是canvas的宽度 * 高度 * 4 得来的

乘4是因为图片是rgba颜色组成的 1代表r, 2代表g, 3代表b, 4代表透明度

例如想获取canvas画图 x0 y0 的颜色就可以这样写:

var imageData = ctx.getImageData(e.x, e.y, e.x, e.y);
alert("rgba(" + imageData.data[0] + ", " + imageData.data[1] + ", " + imageData.data[2] + ", " + imageData.data[3] + ")");

赋值下代码直接运行双击canvas会弹出alert框

按下F12可以看到打印出来的dots数组存储的输入文字坐标

<html>
    <head>
        <title></title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            canvas{
                background-color: white;
            }
        </style>
        <script>
            function clear(){
	            ctx.beginPath();
	            ctx.clearRect(0, 0, width, height);
	            ctx.closePath();
	        }
	        function drawText(text){
	            ctx.beginPath();
		        ctx.font = "50px 微软雅黑 bold";
		        ctx.fillStyle = "rgba(255, 0, 0, 1)";
		        ctx.textAlign = "center";
		        ctx.textBaseline = "middle";
		        ctx.fillText(text, cx, cy);
		        ctx.fill();
		        ctx.closePath();
	        }
	        function random(){
	            return Math.floor(Math.random() * 255);
	        }
	        function randomColor(){
	            return "rgba(" + random() + ", " + random() + ", " + random() + ", " + random() + ")";
	        }
	        function toWhite(){
	            ctx.beginPath();
		        ctx.rect(0, 0, width, height);
		        ctx.fillStyle = "white";
		        ctx.fill();
		        ctx.closePath();
	        }
        </script>
    </head>
    <body>
        <canvas id="canvas" ></canvas>
    </body>
    <script>
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var width = window.innerWidth;
        var height = window.innerHeight;
        var cx = width / 2;
        var cy = height / 2;
        
        canvas.width = width;
        canvas.height = height;
        
        toWhite();
        
        canvas.ondblclick = function(e){
            var imageData = ctx.getImageData(e.x, e.y, e.x, e.y);
            alert("rgba(" + imageData.data[0] + ", " + imageData.data[1] + ", " + imageData.data[2] + ", " + imageData.data[3] + ")");
            var image = new Image();
            image.src = canvas.toDataURL("image/jpeg", 1);
            document.body.appendChild(image);
        };
        
        drawText("这是一个能够获取文字下标的测试文件!");
        
        var imageData = ctx.getImageData(0, 0, width, height);
        var dots = new Array();
        var index = 0;
        for(var y = 0 ; y < imageData.height ; y++){
	        for(var x = 0 ; x < imageData.width ; x++){
	            index = (y * imageData.width + x) * 4;
	            if(imageData.data[index] == 255 && imageData.data[index + 1] == 0)
	                dots.push({x: x, y: y});
	        }
        }
        
        clear();
        toWhite();
        
        dots.forEach(function(dot){
            ctx.beginPath();
	        ctx.arc(dot.x, dot.y, 1, 0, Math.PI * 2);
	        ctx.strokeStyle = randomColor();
	        ctx.stroke();
	        ctx.closePath();
        });
        
        console.log(dots);
    </script>
</html>