js實現圖片區域可點擊大小隨意改變(適用移動端)代碼實例

2019-11-19 10:49:47

字體：大中小

來源：轉載

供稿：網友

實現圖片區域可點擊，實際上使用map是可以的，但是適配效果并不好，圖片只能是固定大小的值，而且點都被寫死了。

在這里，我使用的js基于canvas寫的一個小工具。可以圈出你需要點擊的部分，然后生成一串json，在預覽頁面就可以看見效果了；

在實際應用中，只要用工具處理一下圖片，再把數據存入數據庫，就很方便了；

使用工具時，先上傳圖片。然后就可以圈了，圈完一定要記得，點擊保存數據，，，接著就可以預覽了，預覽點擊的效果，可以看控制臺，

首先是工具

首先工具的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()">保存數據</button>        <button onclick="getData()">導入數據</button>        <button onclick="seeData(true)">查看數據</button>        <a href="preview.html" rel="external nofollow" target="_blank"><button>預覽效果</button></a>      </p>      <p>        <input type="file" name="imgload" id="imgload" value="上傳圖片" />      </p>      <p>        <button onclick="reduo()">撤銷</button>        <button onclick="clearAll()">清除</button>      </p>      <p>        基礎寬度:<input type="text" name="width" id="width" value="800" />      </p>      <p>        基礎高度:<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">確認</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 = [];   }}  //保存數據function saveData(){  var data = {    "dec":"圖片點擊",    "version":"1",    "img":$baseImg,    "module":moduleList,    "baseWidth":$baseWidth.val(),    "baseHeight":$baseHeight.val()  }  console.log(JSON.stringify(data));  localStorage.setItem("data",JSON.stringify(data));}//查看數據function seeData(flag){  var data = {    "dec":"圖片點擊",    "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;    });     }); //轉化為base64function imgToBase64(file,callback){   var reader = new FileReader();   reader.onload = function (e) {    callback(e.target.result);  };  reader.readAsDataURL(file); // 讀取完后會調用onload方法} //確認信息$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()});});  //隨機獲取名稱function getName(){  var timer = new Date();  var arr = JSON.stringify(timer).replace(/:|-|"/g ,'').split('.');  var str = arr.join('');  return str;}  //導入模板function getData(){  var data = JSON.parse(localStorage.getItem("data"));  if(data){    moduleList = data.module;;    $baseImg = data.img;    drawn(data);  }else{    alert('沒有模板數據.');  }} //撤銷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);} //給數據，畫出來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預覽

<!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);    //判斷點擊了圖片的某個地方    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;        }      }    };         //點擊中了選中的區域    function clickCall(result){      console.log(result.dec);      console.log(result.url);          }  </script></html>

效果