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


Posted in Javascript onSeptember 11, 2019

实现图片区域可点击,实际上使用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实现图片区域可点击大小随意改变(适用移动端)代码实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
基于jquery的表格排序
Sep 11 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
Less 安装及基本用法
May 05 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 Javascript
解析vue、angular深度作用选择器
Sep 11 #Javascript
javascript 构建模块化开发过程解析
Sep 11 #Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 #Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 #Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 #Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 #Javascript
js简单的分页器插件代码实例
Sep 11 #Javascript
You might like
NO3第三帝国留言簿制作过程
2006/10/09 PHP
一个取得文件扩展名的函数
2006/10/09 PHP
php经典算法集锦
2015/11/14 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
通过Javascript创建一个选择文件的对话框代码
2012/06/16 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
详解Django中的form库的使用
2015/07/18 Python
python制作一个桌面便签软件
2015/08/09 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
Python sys模块常用方法解析
2020/02/20 Python
经理管理专业自荐信范文
2013/12/31 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
教育合作协议范本
2014/10/17 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
施工安全协议书
2016/03/22 职场文书