js实现给图片做标注

效果图：

js代码

window.onload = function() {//页面一加载调用
            bindEvent();
            loadMark();
            document.getElementById("clearpin").addEventListener("click", function() {//点击清除按钮
                clearMark();
            });
            
            var container = getid('container');
            console.log("container:", container)
            var reg = new RegExp('"',"g");
            var map = document.getElementById("map");
            var canvasNew = document.createElement('canvas');
            var Newimage  = document.createElement('img');
            var context   = canvasNew.getContext('2d');
            var imgData   = localStorage.getItem('pdfsaveimg');
            var pdfPageIndex = localStorage.getItem('pageindex');
            var canvasWidth  = localStorage.getItem('imgWidth');
            var canvasHeight = localStorage.getItem('imgHeight');
            console.log("pdfPageIndex", pdfPageIndex);
            console.log("Width, Height", canvasWidth, canvasHeight);
            console.log("canvasNew", canvasNew);
            Newimage.src = imgData;
            container.style.width  = canvasWidth + 'px'
            container.style.height = canvasHeight + 'px'
            container.style.margin = "40px auto"
            map.appendChild(Newimage);
        };

        var arr = [];
        var mark = {}; //创建一个对象，
        function getid(id) { //封装函数，通过id获取该id的html标签对象
            return document.getElementById(id);
        }
        function getOffset(obj) {//封装坐标函数
            var x = 0,
                y = 0;
            while(obj) {
                x += obj.offsetLeft;//offsetLeft返回的就是元素距离父元素左边的距离，单位是像素
                y += obj.offsetTop;//offsetTop返回的就是元素距离父元素上边的距离，单位是像素
                obj = obj.offsetParent;//指定的父元素
            }
            return {//返回x和y的坐标
                x: x,
                y: y
            };
        }

        function addMark(p, x, y, text_val, index) {//封装创建小红点和输入文字内容的函数
            var div = document.createElement("div");//创建div元素
            div.id = "mark" + index;//给div元素添加id
            div.className = "mark";//给div元素添加class
            div.style.left = x + "px";//div的css属性
            div.style.top = y + "px";
            p.appendChild(div);//把这个div元素追加到传过来的元素的下面
            var content_p = document.createElement("p");
            content_p.className = "content_p";
            console.log("text_val::" + text_val);
            content_p.innerHTML = text_val;//给p标签添加内容
            content_p.id = "content_p" + index;
            content_p.style.left = x + "px";
            content_p.style.top = y + "px";
            p.appendChild(content_p);

        }

        function addInput(p, x, y, index) {//封装创建输入框和确认按钮的函数
            var div = document.createElement("div");
            div.id = "input_div" + index;
            div.className = "mark_input";
            div.style.left = x + 5 + "px";
            div.style.top = y + "px";
            var inp = document.createElement("input");
            inp.id = "mark_input";
            inp.className = "text_input";
            inp.type = "text";
            inp.value = "";
            var inp2 = document.createElement("input");
            inp2.id = "sub_input";
            inp2.className = "sub_input";
            inp2.type = "submit";
            inp2.value = "OK";
            div.appendChild(inp);
            div.appendChild(inp2);
            p.appendChild(div);
            console.log(div)
        }

        function bindEvent() {
            getid("map").onclick = function(oEvent) {    //点击图片时调用
                    console.log(arr);
                oEvent = oEvent || event;
                var container = getid("container");
                var offset = getOffset(container);      //调用getOffset函数
                console.log(offset.y);
                console.log(oEvent.clientY);
                var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                console.log(scrollTop);  
                var x = oEvent.clientX - offset.x;      //用浏览器窗口的可视区域减去getOffset函数返回的x值
                var y = oEvent.clientY - offset.y + scrollTop;
                addInput(container, x, y, arr.length);
                var i = arr.length;
                getid("sub_input").onclick = function() {//点击确认按钮时调用
                     console.log(arr);
                    text_val = getid("mark_input").value;//输入框内容
                    container.removeChild(getid("input_div" + i));//删除container元素下面的input_div
                    console.log(text_val);
                    addMark(container, x, y, text_val, arr.length);//创建内容
                    mark.x = x;
                    mark.y = y;
                    mark.text_val = text_val;
                    arr = sessionStorage['arr']   //获取本地存储里面的值
                    if(arr !='' && arr != undefined){
                        arr = JSON.parse(arr)
                    }else{
                            arr = [];
                           console.log('本地存储没有值')
                    }
                    console.log(mark)
                    arr.push(mark);//把x，y坐标和文字内容放到数组里面
                    console.log(arr);
                    saveMark();//调用本地存储的函数

                }

            };

        }
        
        function saveMark() {//封装本地存储的函数
            arr = JSON.stringify(arr);
            console.log('保存至对话存储', arr);
            sessionStorage['arr'] = arr;
            pin_ajax();
        }

        function loadMark() {//页面一加载的时候调用这个函数
            var arr = sessionStorage['arr']//获取本地存储里面的值
            if(arr !='' && arr != undefined){
                console.log(arr)
                arr = JSON.parse(arr)
            }else{
                    arr = [];
                   console.log('本地存储没有值')
            }
            console.log(arr)
            if(arr) {//判断本地存储里面是否有值
                var container = getid("container");
                for(var i = 0; i < arr.length; i++) {
                    console.log(arr[i])
                    addMark(container, arr[i].x, arr[i].y, arr[i].text_val, i);//在页面上创建和本地存储对应的内容
                }
            }
        }

        function clearMark() {//点击清楚标记时调用
            arr = sessionStorage['arr']   //获取本地存储里面的值
            if(arr !='' && arr != undefined){
                arr = JSON.parse(arr)
            }
            if(arr.length === 0) {
                alert('标记已全部清除')
            } else {
                var container = getid("container");
                var i = arr.length - 1;
                console.log(i);
                container.removeChild(getid("mark" + i));
                container.removeChild(getid("content_p" + i));
                arr.length = arr.length - 1;
                saveMark();
            }

        }
}

以下是html代码

<div class="bg">
         <div id="container" >
            <div id="map">
                
            </div>
         </div>
    </div>

以下是css代码

* {
            margin: 0;
            padding: 0;
        }
        
        #container {
            position: relative;
            margin-left: 20px;
            margin-top: 30px;
            width: 1200px;
            height: 800px;
            border: 1px solid #CCC;
            overflow: hidden;
        }
        
        #map {
            position: absolute;
        }
        
        .mark {
            position: absolute;
            width: 20px;
            height: 20px;
            font-size: 0px;
            background: url("/img/td.png") no-repeat left center;
            background-size:100% ;
        }
        
        .mark_input {
            position: absolute;
        }
        
        .content_p {
            position: absolute;
            height: 20px;
            line-height: 20px;
            margin-top: -7px;
            margin-left: 22px;
            padding:3px 10px 23px 10px;
            border: 1px solid blue;
            background-color: #fff;
        }
        #clear{
            margin-left: 50px;
        }