實(shí)現(xiàn)圖片區(qū)域可點(diǎn)擊，實(shí)際上使用map是可以的，但是適配效果并不好，圖片只能是固定大小的值，而且點(diǎn)都被寫死了。
在這里，我使用的js基于canvas寫的一個(gè)小工具。可以圈出你需要點(diǎn)擊的部分，然后生成一串json，在預(yù)覽頁面就可以看見效果了；
在實(shí)際應(yīng)用中，只要用工具處理一下圖片，再把數(shù)據(jù)存入數(shù)據(jù)庫，就很方便了；
使用工具時(shí)，先上傳圖片。然后就可以圈了，圈完一定要記得，點(diǎn)擊保存數(shù)據(jù)，，，接著就可以預(yù)覽了，預(yù)覽點(diǎn)擊的效果，可以看控制臺(tái)，
首先是工具
首先工具的html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; font-family: "微軟雅黑"; } .hide{ display: none; } canvas{ border: 1px solid red; display: block; margin: 0 auto; background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; } .cover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); } .cover p{ text-align: center; } .btn{ width: 800px; margin: 0 auto; padding-top: 10px; } .btn p{ padding-bottom: 10px; } a{ text-decoration: none; color: #000; } button{ line-height: 30px; padding: 0 10px; cursor: pointer; border-radius: 4px; background: #449d44; color: #fff; border: none; } </style> </head> <body> <div class="btn"> <p> <button onclick="saveData()">保存數(shù)據(jù)</button> <button onclick="getData()">導(dǎo)入數(shù)據(jù)</button> <button onclick="seeData(true)">查看數(shù)據(jù)</button> <a href="preview.html" rel="external nofollow" target="_blank"><button>預(yù)覽效果</button></a> </p> <p> <input type="file" name="imgload" id="imgload" value="上傳圖片" /> </p> <p> <button onclick="reduo()">撤銷</button> <button onclick="clearAll()">清除</button> </p> <p> 基礎(chǔ)寬度:<input type="text" name="width" id="width" value="800" /> </p> <p> 基礎(chǔ)高度:<input type="text" name="width" id="height" value="600" /> </p> </div> <canvas id="canvas" width="800" height="600"></canvas> <div class="cover hide"> <p> <span>url地址:</span> <input type="text" name="" id="urlAddress" value="" /> </p> <p> <span>描述:</span> <input type="text" name="dec" id="dec" value="" /> </p> <p> <button class="contain">確認(rèn)</button> </p> </div> </body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/index.js"></script></html>接著是工具的js代碼
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');ctx.lineWidth = 1;ctx.strokeStyle="green";/*ctx.beginPath();ctx.moveTo(10, 100);ctx.lineTo(300,100);ctx.stroke(); ctx.closePath();*/var run = false;var moduleList = [];var path = [];var $baseImg = ''; var $cover = $(".cover");var $urlAddress = $('#urlAddress');var $dec = $("#dec"); var $baseWidth = $('#width');var $baseHeight = $('#height'); canvas.onmousedown = function(e){ //console.log(e.clientX); //console.log(e.offsetX); ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); path.push({ x:e.offsetX, y:e.offsetY }); run = true;} canvas.onmousemove = function(e){ //var x = e.offsetX; if(run){ ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); path.push({ x:e.offsetX, y:e.offsetY }); }}canvas.onmouseup = function(e){ run = false; ctx.closePath(); if(path.length > 10){ $cover.removeClass('hide'); }else{ path = []; }} //保存數(shù)據(jù)function saveData(){ var data = { "dec":"圖片點(diǎn)擊", "version":"1", "img":$baseImg, "module":moduleList, "baseWidth":$baseWidth.val(), "baseHeight":$baseHeight.val() } console.log(JSON.stringify(data)); localStorage.setItem("data",JSON.stringify(data));}//查看數(shù)據(jù)function seeData(flag){ var data = { "dec":"圖片點(diǎn)擊", "version":"1", "img":$baseImg, "module":moduleList, "baseWidth":$baseWidth.val(), "baseHeight":$baseHeight.val() } if(flag){ console.log(JSON.stringify(data)); } return data;} //圖片背景$('#imgload').on('change',function(){ imgToBase64(this.files[0],function(result){ console.log(result); var base64Data = 'url(' + result + ')'; $(canvas).css({'background-image': base64Data}); $baseImg = result; }); }); //轉(zhuǎn)化為base64function imgToBase64(file,callback){ var reader = new FileReader(); reader.onload = function (e) { callback(e.target.result); }; reader.readAsDataURL(file); // 讀取完后會(huì)調(diào)用onload方法} //確認(rèn)信息$cover.on('click','.contain',function(){ if($urlAddress.val() == ''){ alert('地址不能為空'); }else{ moduleList.push({ id:getName(), path:path, url:$urlAddress.val(), dec:$dec.val() }); path = []; $cover.addClass('hide'); }}); //修改高度和寬度$baseWidth.on('change',function(){ $(canvas).css({'width': $(this).val()});});$baseHeight.on('change',function(){ $(canvas).css({'height': $(this).val()});}); //隨機(jī)獲取名稱function getName(){ var timer = new Date(); var arr = JSON.stringify(timer).replace(/:|-|"/g ,'').split('.'); var str = arr.join(''); return str;} //導(dǎo)入模板function getData(){ var data = JSON.parse(localStorage.getItem("data")); if(data){ moduleList = data.module;; $baseImg = data.img; drawn(data); }else{ alert('沒有模板數(shù)據(jù).'); }} //撤銷function reduo(){ moduleList.pop(); ctx.clearRect(0, 0, canvas.width, canvas.height); drawn(seeData());} //清除所有function clearAll(){ moduleList = []; ctx.clearRect(0, 0, canvas.width, canvas.height);} //給數(shù)據(jù)，畫出來function drawn(data){ ctx.clearRect(0, 0, canvas.width, canvas.height); var module = data.module; var base64Data = 'url(' + data.img + ')'; $(canvas).css({'background-image': base64Data}); $baseWidth.val(data.baseWidth); $baseHeight.val(data.baseHeight); $(canvas).css({'width': data.baseWidth,'height':data.baseHeight}); //開始畫 for(var i = 0; i < module.length;i++){ var path = module[i].path; ctx.beginPath(); ctx.moveTo(path[0].x, path[0].y); for(var j = 1; j < path.length; j++){ ctx.lineTo(path[j].x, path[j].y); ctx.stroke(); } ctx.closePath(); }}最后是preview.html預(yù)覽
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; } canvas{ background-position: 0 0; background-repeat: no-repeat; background-size: 100% 100%; width: 100%; height: 100%; } .wrap{ border: 1px solid red; margin: 0 auto; width: 800px; height: 600px; } </style> </head> <body> <div class="wrap"> <canvas id="canvas" ></canvas> </div> </body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var $canvas = $('#canvas'); var canvas = $canvas[0]; var data = JSON.parse(localStorage.getItem("data")); var ctx = canvas.getContext('2d'); ctx.lineWidth = 1; ctx.strokeStyle="rgba(0,0,0,0)"; var module = data.module; var rateWidth = $canvas.width()/data.baseWidth; var rateHeight = $canvas.height()/data.baseHeight; var base64Data = 'url(' + data.img + ')'; $canvas.css({'background-image': base64Data}); console.log(rateWidth); console.log(rateHeight); //判斷點(diǎn)擊了圖片的某個(gè)地方 canvas.onclick = function(e){ var x = event.pageX - canvas.getBoundingClientRect().left; var y = event.pageY - canvas.getBoundingClientRect().top; for(var i = 0; i < module.length;i++){ var path = module[i].path; ctx.beginPath(); ctx.moveTo(path[0].x*rateWidth, path[0].y*rateHeight); for(var j = 1; j < path.length; j++){ ctx.lineTo(path[j].x*rateWidth, path[j].y*rateHeight); } ctx.closePath(); if(ctx.isPointInPath(x, y)){ clickCall(module[i]); return; } } }; //點(diǎn)擊中了選中的區(qū)域 function clickCall(result){ console.log(result.dec); console.log(result.url); } </script></html>效果
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注
