js实现图片区域可点击大小随意改变(适用移动端)代码实例

程序员文章站 2022-08-02 21:04:11

实现图片区域可点击，实际上使用map是可以的，但是适配效果并不好，图片只能是固定大小的值，而且点都被写死了。在这里，我使用的js基于canvas写的一个小工具。可以圈出...

实现图片区域可点击，实际上使用map是可以的，但是适配效果并不好，图片只能是固定大小的值，而且点都被写死了。

在这里，我使用的js基于canvas写的一个小工具。可以圈出你需要点击的部分，然后生成一串json，在预览页面就可以看见效果了；

在实际应用中，只要用工具处理一下图片，再把数据存入数据库，就很方便了；

使用工具时，先上传图片。然后就可以圈了，圈完一定要记得，点击保存数据，，，接着就可以预览了，预览点击的效果，可以看控制台，

首先是工具

js实现图片区域可点击大小随意改变(适用移动端)代码实例

首先工具的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;
    });
     
});
 
//转化为base64
function 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>

效果

js实现图片区域可点击大小随意改变(适用移动端)代码实例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： js贪心算法钱币找零问题代码实例

下一篇： node-red File读取好保存实例讲解