js实现图片区域可点击大小随意改变(适用移动端)代码实例
程序员文章站
2022-05-07 09:34:25
实现图片区域可点击,实际上使用map是可以的,但是适配效果并不好,图片只能是固定大小的值,而且点都被写死了。
在这里,我使用的js基于canvas写的一个小工具。可以圈出...
实现图片区域可点击,实际上使用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; }); }); //转化为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>
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: pip换源
下一篇: 一亿像素时代来了!手机世界从未如此清晰