使用canvas在图片上画矩形及文字

妖狐艹你老母 2021-09-21 07:44 802阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]

# 上代码 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div style="display: flex;">
            <canvas id="myCanvas" width="520" height="720" style="border:1px solid #d3d3d3;">
                这是浏览器不支持canvas时展示的信息
            </canvas>
            <img id="img" width="400px" height="400px" />
        </div>
        <div>
            <input accept=".png,.jpg,.jpeg" type="file" id="file" onchange="myFile(file)" />
            <button onclick="window.close()">关闭窗口</button>
        </div>
    
        <script>
    
            const img = document.getElementById("img")
            // 把图片转base64
            function myFile(file) { 
                const imgsize = file.files[0]
                const render = new FileReader()
                render.readAsDataURL(imgsize)
                render.onload = (e) => { 
                    // console.log(e, 'e')
                    const src = e.target.result
                    // console.log(src)
                    img.src = src
                    srcImg = src
                    canvasPart(src)
                }
            }
    
            function canvasPart(srcImg) { 
                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
    
                var img = new Image()
                // 这里可以放 图片路径 "./test.jpg" || base64图片 || 图片链接
                img.src = srcImg || 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589884154&di=9b0f36e95282f61005aa4b7dc6a7698b&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                console.log(img, 'SRC', srcImg)
                img.onload = function () { 
                    // 设置图片在canvas上 前面两个0,0是边距, 后面是宽高
                    ctx.drawImage(img, 0, 0, 520, 720);
    
                    // 添加文字 后面两个数字是坐标
                    ctx.font  = "20px sans-serif"
                    ctx.fillStyle = '#e22018'
                    ctx.fillText("添加文字", 125, 137);
    
                    // 画矩形 前两个数字是坐标, 后面是矩形的宽高 fillRect是填充的
                    ctx.strokeStyle = '#e22018'
                    ctx.strokeRect(125, 137, 115, 108);
    
                    ctx.strokeStyle = 'pink'
                    ctx.strokeRect(240, 245, 248, 248);
                }
            }
    
            canvasPart('')
        </script>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk1MzIyNw_size_16_color_FFFFFF_t_70]: /images/20210920/c58d2cbf1d754f18acc78d574e1fa7e2.png