图片热区编辑器

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    #box {
        width: 750px;
        height: 750px;
        position: relative;
    }

    #diagonal {
        position: absolute;
        top: 0px;
        left: 0;
        opacity: 1;
    }

    #img {
        position: absolute;
        top: 0px;
        left: 0;
        opacity: 0;
    }

    .hot_div {
        border: 1px dashed blue;
        background: #5a72f8;
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0.1;
        z-index: 9;
    }

    #map-list {
        position: absolute;
        top: 0;
        z-index: 100;
        background: #f04747aa;
        cursor: pointer;
        line-height: 40px;
    }

</style>
<form action="<?= $HTTP_SELF_URL ?>" method="post" name="form" id="form">
    <?php echo form_hidden('act', 'do_echo_re'); ?>
    <input autocomplete="off" type="hidden" name="act" value="" id="srcurl" name="srcurl">
    <div id="box" style="background: url('') no-repeat 0% 0% transparent;">
        <canvas id="diagonal" width="750px" height="750px"></canvas>
        <img id="img" src="../images/bj.png" usemap="#Map">
        <map id="Map" name="Map"></map>
        <ul id="map-list"></ul>
    </div>
    <div class="fixedbutton">
        <div class="fd">
            <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                <i class="layui-icon layui-icon-upload"></i> 单图片上传
            </button>
            <button class="btn btn2" type="submit">确定并保存</button>
            <a href="javascript:;" onClick="parent.layer.close(iframe_index)">
                <button class="btn btn3" type="button">关闭</button>
            </a>
        </div>
    </div>
</form>
<script>
    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: '_up.php?act=main', // 实际使用时改成您自己的上传接口即可。
            accept: 'images',
            field: 'upfile',
            data: {
                // imageSizeCompression: true,
                // w: 750,
            },
            done: function (res) {
                if (res.status == 1) {
                    //更改背景图片
                    $('#box').css('background', 'url("' + res.url + '") no-repeat 0% 0% transparent');
                    $('#box #img').attr('src', res.url);
                    $('#box #diagonal').attr('height', res.size[1] + 'px');
                    //修改画布的默认高度
                    layer.msg('上传成功', {
                        time: 500
                    }, function () {

                        // window.location.href = '../search.php?pic_src=' + res.url;
                    })
                } else {
                    layer.msg(res.msg);
                }
            },
            error: function () {
                //请求异常回调
                // console.log(res)
            }
        });
    });
</script>
<!--选取热区-->
<script type="text/javascript">

    document.querySelector('img').addEventListener('mousedown', function (event) {
        event.preventDefault();
    });

    var Oimg = document.getElementById("img")
    var pointList = [];
    let status = false;

    window.onload = function () {
        Oimg.onmousedown = function (e) {
            if (status) {
                return;
            }
            var posx = e.clientX + document.body.scrollLeft;
            var posy = e.clientY + document.body.scrollTop;

            let existence = pointList.filter(item => {
                if (posx > item.x1 && posx < item.x2 && posy > item.y1 && posy < item.y2) {
                    return item;
                }
            })
            if (existence && existence.length) {
                console.log('这个区域已经有热区了');
                return;
            }

            var div = document.createElement("div");
            div.className = "hot_div";
            div.id = "hot_div" + pointList.length;
            div.style.left = posx + "px";
            div.style.top = posy + "px";

            document.body.appendChild(div);
            document.onmousemove = function (ev) {


                div.style.left = Math.min(ev.clientX + document.body.scrollLeft, posx) + "px";
                div.style.top = Math.min(ev.clientY + document.body.scrollTop, posy) + "px";
                div.style.width = Math.abs(posx - (ev.clientX + document.body.scrollLeft)) + "px";
                div.style.height = Math.abs(posy - (ev.clientY + document.body.scrollTop)) + "px";

                document.onmouseup = function () {
                    div.parentNode.removeChild(div);
                    var point = {
                        x1: parseInt(div.style.left),
                        y1: parseInt(div.style.top),
                        x2: parseInt(div.style.left) + parseInt(div.style.width),
                        y2: parseInt(div.style.top) + parseInt(div.style.height),
                        host: 'http://www.ahhc.cc'
                    }
                    pointList.push(point);

                    createMap();

                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }
    }

    //删除
    $(document).on('click', '.delPoint', function (e) {
        status = true;
        document.onmousemove = null;
        document.onmouseup = null;
        var index = $(this).data('index');
        pointList.splice(index, 1);
        createMap();
        setTimeout(function () {
            status = false;
        }, 1000)
        return false;
    })

    //点击编辑
    $(document).on('click', '.pointli', function (e) {
        status = true;
        document.onmousemove = null;
        document.onmouseup = null;
        var index = $(this).data('index');
        let point = pointList[index];
        var host = prompt("请输入新的链接", point.host);
        if (host) {
            point.host = host;
            pointList.splice(index, 1, point);
            createMap();
        }

        e.stopPropagation();
        e.preventDefault();
        setTimeout(function () {
            status = false;
        }, 1000)
    })


    // 创建map热区和坐标li
    function createMap() {
        var li = '';
        var areaTpl = '';
        var canvers = document.getElementById("diagonal");
        var context = canvers.getContext("2d");
        context.globalAlpha = 0.5;

        pointList.forEach((item, index) => {
            li += '<li class="pointli" data-index="' + index + '">' + (item.host) + '<button class="delPoint" data-index="' + index + '">删除</button></li>';
            areaTpl += '<area ' +
                'shape="poly" ' +
                'coords="' + item.x1 + ',' + item.y1 + ',' + item.x2 + ',' + item.y1 + ',' + item.x2 + ',' + item.y2 + ',' + item.x1 + ',' + item.y2 + '" ' +
                // 'href ="' + (item.host) + '" ' +
                // 'target ="_blank" ' +
                'alt="Venus" />';
        })
        //console.log(pointList)
        $('#map-list').html(li);
        $('#Map').html(areaTpl);

        $("#Map area").each(function () {
            $(this).mouseover(function () {

                context.beginPath();
                var strs = new Array(); //定义一数组
                strs = $(this).attr("coords").split(",");
                var i1, i2;
                for (var i = 0; i < strs.length; i++) {
                    if (i % 2 == 0) {
                        i1 = strs[i];
                    }
                    if (i % 2 == 1) {
                        i2 = strs[i];
                        if (i == 1) {
                            context.moveTo(i1, i2);
                        } else {
                            context.lineTo(i1, i2);
                        }
                    }
                }

                context.fillStyle = "#C0C0C0";
                context.fill();

                context.closePath(); //闭合
                //url高亮显示
                var indexss = $(this).index();
                $("#map-list .pointli").each(function (index, element) {
                    if (index == indexss) {
                        $(this).css("background-color", "#C0C0C0");
                    }
                });
            });
            $(this).mouseout(function () {
                context.clearRect(0, 0, 750, 750);
                //url去除高亮显示
                $("#map-list .pointli").each(function (index, element) {
                    $(this).css("background-color", "");
                });
            });
        });

        $("#map-list .pointli").each(function () {
            $(this).mouseover(function () {
                $(this).css("background-color", "#C0C0C0");

                var indexss = $(this).index();
                $("#Map area").each(function (index, element) {
                    if (index == indexss) {
                        context.beginPath();
                        var strs = new Array(); //定义一数组
                        strs = $(this).attr("coords").split(",");
                        var i1, i2;
                        for (var i = 0; i < strs.length; i++) {
                            if (i % 2 == 0) {
                                i1 = strs[i];
                            }
                            if (i % 2 == 1) {
                                i2 = strs[i];
                                if (i == 1) {
                                    context.moveTo(i1, i2);
                                } else {
                                    context.lineTo(i1, i2);
                                }
                            }
                        }

                        context.fillStyle = "#C0C0C0";
                        context.fill();

                        context.closePath(); //闭合
                    }
                });
            });

            $(this).mouseout(function () {
                context.clearRect(0, 0, 750, 750);
                $("#map-list .pointli").each(function (index, element) {
                    $(this).css("background-color", "");
                });
            });
        });

    }
</script>