canvas实现在图片上画框

wuhuhoo

已于 2023-09-07 14:16:29 修改

阅读量740

点赞数

文章标签：前端 javascript css

于 2023-09-07 14:15:55 首次发布

本文链接：https://blog.csdn.net/qq_42491673/article/details/132736710

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            height: 600px;
            border: 1px solid black;
            background-color: aqua;
        }
        #img1{
            width: 400px;
            height: 600px;
        }
    </style>
</head>
<body>

    <div id="box">
        <img id="img1" src="./img/1.jpg">
    </div>

    <script type="text/javascript" src="./js/canvas1.js"></script>
    <script type="text/javascript">


        //要画框的坐标
        const rects = [{x:140,y:35,w:80,h:15},{x:43,y:397,w:25,h:20}];

        const drawConfig = {
            // //划线宽度
            // lineWidth: 2,
            // //划线颜色
            // lineColor: "red"
        }

        //判断一个对象是不是空对象
        // console.log(JSON.stringify(drawConfig) === '{}')
        // console.log(Object.getOwnPropertyNames(drawConfig).length == 0)
        // console.log(Object.keys(drawConfig).length === 0 )

        foundCanvas.prepareCanvas(rects,"box",drawConfig);
    </script>
</body>
</html>

const foundCanvas = (function () {

    //js入口，监听屏幕
    function _prepareCanvas(rects,id,drawConfig) {
        //删除已有画框
        _delCanvas(id);
        //判断是否设置了画框参数
        const config = _isConfig(drawConfig);
        //创建画布
        _createCanvas(rects,id,config);


        window.addEventListener("resize",function () {
            window.addEventListener('load',function () {
                _delCanvas(id);
                _createCanvas(rects,id,config);
            });
        });
    };


    //删除现有画布
    function _delCanvas(id) {

        //判断容器标签是否存在
        if (!document.getElementById(id)){
            alert(`标签${id}不存在`);
            return;
        }
        const box = document.getElementById(id);
        //删除画布
        const canvasCount = box.getElementsByTagName("canvas");
        if (canvasCount.length > 0){
            for (let i=0;i<canvasCount.length;i++){
                document.getElementById("canvas"+id).remove();
            }
        }
    };


    //检查是否配置了画框参数
    function _isConfig(drawConfig) {
        let config = {};
        if (config && drawConfig != "" && drawConfig != null && JSON.stringify(drawConfig) != '{}'){
            config = Object.assign({},drawConfig);
        }else{
            config = {
                lineWidth: 2,
                lineColor: "red"
            }
        }
        return config;
    }

    // 创建画布
    function _createCanvas(rects,id,config) {
        if (!document.getElementById(id)){
            alert(`标签${id}不存在`);
            return;
        }
        const box = document.getElementById(id);
        const divSize = {
            //画布的宽高，等于div的宽高
            w: box.offsetWidth,
            h: box.offsetHeight
        }
        console.log("divSize:"+divSize.w+","+divSize.h);
        const canvasElement = document.createElement("canvas");
        let canvasElementId = "canvas"+id;
        canvasElement.id = canvasElementId;
        console.log("canvasElementId:"+canvasElementId);
        box.appendChild(canvasElement);
        _initCanvas(divSize,rects,canvasElementId,config)

    };

    //初始化，显示画布
    function _initCanvas(divSize,rects,canvasElementId,config) {
        const canvasEle = document.getElementById(canvasElementId);
        const context = canvasEle.getContext("2d");
        const img = document.getElementById("img1");
        //需要创建一个Image，把原来的图片的src给它，再删除原来的，这样页面上只会显示一张图片
        //如果不删掉原来的图片，就会有两张图片
        const image = new Image();
        image.src = img.src;

        console.log("img.src:"+img.src);
        image.onload = function () {
            document.getElementById(canvasElementId).width = divSize.w;
            document.getElementById(canvasElementId).height = divSize.h;
            context.drawImage(image,0,0,divSize.w,divSize.h);
            _drawRects(context,rects,config);
        }
        img.remove();
    }

    function _drawRects(context,rects,config) {

        if (rects.length === 0){
            return;
        }

        //根据画框的坐标和宽高画框
        for (let i = 0; i < rects.length; i++){
            context.beginPath();
            context.lineWidth = config.lineWidth;
            context.strokeStyle = config.lineColor;
            context.strokeRect(rects[i].x,rects[i].y,rects[i].w,rects[i].h);
        }
    }

    return{
        prepareCanvas:_prepareCanvas
    };
})();