图片分割为九宫格

Posted mp1994

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片分割为九宫格相关的知识，希望对你有一定的参考价值。

技术图片

效果图如上：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>图片九宫格</title>
    </head>
    <body>
        <h1>点击图片切割</h1>
        <img id="img" style="display: none;" src="imgs/icon.jpeg" />
        <canvas id="imageC" width="900" height="300"></canvas>
        <script type="text/javascript">
            window.onload = function () 
                let canvas = document.getElementById(‘imageC‘);
                let ctx = canvas.getContext(‘2d‘);
                let img = document.getElementById(‘img‘);
                let btn = document.getElementById(‘btn‘);
                
                const W = 300
                const H = 300
                
                ctx.drawImage(img, 0, 0, W, H);
                /* 点击裁剪 */
                canvas.onclick = function () 
                    const numX = 3
                    const numY = 3
                    
                    /* 等分图片 */
                    for (let x=0; x<numX; x++) 
                        for (let y=0; y<numY; y++) 
                            /* 切割的宽高 */
                            const copyW = W/numX
                            const copyH = H/numY
                            /* x坐标 */
                            const locx = copyW * x   
                            /* y坐标 */
                            const locY = copyH * y

                            let imgData = ctx.getImageData(locx, locY, copyW, copyH)
                            /* 
                                x          y 时          w/h    位置： 
                                0             0          100    300   0     
                                100           0                 400   0
                                200        0                500   0
                                0          100              300   100
                                100        100              400   100
                                200        100              500   100
                                0          200              300   200
                                100        200              400   200
                                100        200              500   200
                             */
                            const px = 300+ 105*(x+1)
                            const py = 105*y
                            
                            console.log(px, py)
                            ctx.putImageData(imgData, px, py)
                        
                    
                
            
        </script>
    </body>
</html>

 

以上是关于图片分割为九宫格的主要内容，如果未能解决你的问题，请参考以下文章

C++ OpenCV制作九宫格拼图游戏

OpenCV玩九宫格数独——九宫格图片中提取数字

OpenCV玩九宫格数独——九宫格图片中提取数字

ugui 九宫格和图片切割

Android控件GridView之仿支付宝钱包首页带有分割线的GridView九宫格的完美实现

社交应用动态九宫格图片的规则