Effect picture
Insert picture description here
Upload code

<!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>
Use canvas to draw rectangles and text on the picture

Upload code

Guess you like
