当前位置 主页 > 网站技术 > 代码类 > 最大化 缩小

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

    栏目:代码类 时间:2019-09-11 18:15

    实现图片区域可点击,实际上使用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>
    
    下一篇:没有了