| js实现给图片做标注 | 您所在的位置：网站首页 › newimage/wcorner110.gif › js实现给图片做标注 |
|
效果图： image.pngjs代码 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代码 以下是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; } |
| CopyRight 2018-2019 实验室设备网 版权所有 |
