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

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

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

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

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

首先是工具

首先工具的超文本标记语言

！DOCTYPE html html head meta charset=' UTF-8 ' title/title style type=' text/CSS ' * { padd : 0；保证金： 0；字体系列： '微软雅黑；} .隐藏{ display: none}画布{ border: 1px纯红；显示器：块；margin: 0自动背景-位置： 0 0;背景-重复：不重复；背景尺寸： 100% 100%;} .盖{位置：绝对值；top : 0；左： 0；宽度： 100%;高度： 100%;background: rgba(0，0，0，0.4)；} .封面p { text-align : center} .BTN { width : 800 pxmargin : 0自动添加-top : 10px；} .BTN p {填充-底部： 10px} a { text-decoration : nonecolor: # 000}按钮{行高： 30pxpadding: 0 10pxcursor:指针；边界半径： 4px背景技术# 449d 44 color : # fffborder :无；}/style/head body div class=' BTN ' p button onclick=' SaveDATa()'保存数据/button button onclick='getData()'导入数据/button button onclick=' Seedata(true)'查看数据/button a href='预览。html ' rel='外部no follow ' target=' _ blank '按钮预览效果/button/a /p输入类型=' file ' name=' imgload ' id=' imgload ' value='上传图片//p p按钮onclick='reduo()'撤销/button button onclick='clearAll()'清除/button /p p基础宽度：输入类型=“文本”名称='width' id='width '值=' 800 '/p/p基础高度：输入类型=' text '名称=' width ' id=' height '值=' 600 '/p/div canvas id=' canvas ' width=' 800 ' height=' 600 '/canvas div class=' cover hide ' p span URL地址：/span输入类型=' text ' name=' id=' URL地址' value=' '/p/p span描述：/span输入类型=“文本”名称=dec ' id=' dec ' value=' '//p p按钮类=“包含”确认/按钮/p/div/正文脚本类型=' text/JAVAScript ' src=' http : js/jquery。 js /脚本脚本类型=' text/JAVAScript ' src=' http : js/index。js /脚本/html接着是工具的射流研究…代码

var canvas=文档。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；CTX。线宽=1；' ctx.strokeStyle='绿色；/* CTX。begin path()；ctx.moveTo(10，100)；ctx.lineTo(300，100)；CTX。笔画()；CTX。close path()；*/var run=false；var Modulelist=[]；定义变量路径=[];var $ baseImg=var $cover=$(' .封面');var $ URl地址=$(' # URl地址')；var $ dec=$(' # dec ')；var $ baseWidth=$(' # width ')；var $ BaseHeight=$(' # height ')；帆布。onmousedown=function(e){//console。日志(e . client x)；//控制台。log(e . offset x)；CTX。begin path()；ctx.moveTo(e.offsetX，e . offsety)；path.push({ x:e.offsetX，y : e . offset })；run=true}画布。onmousemove=function(e){//var x=e . offset x；if(run){ ctx.lineTo(e.offsetX，e . offset ty)；CTX。笔画()；path.push({ x:e.offsetX，y : e . offset })；} }画布。onmouseup=函数(e){ run=false；CTX。close path()；if(路径。长度10){ $ cover。移除类(“隐藏”)；} else { path=[]；}} //保存数据函数saveData(){ var data={ 'dec': '图片点击，' version':'1 '，' img':$baseImg '，' module':moduleList '，' baseWidth':$baseWidth.val()，' baseHeight ' : $ baseHeight。val()}控制台。日志(JSON。stringify(数据))；localStorage.setItem('data ')，JSON。stringify(数据))；}//查看数据函数seeData(标志){ var data={ 'dec': '图片点击，' version':'1 '，' img':$baseImg '，' module':moduleList '，' baseWidth':$baseWidth.val()，' baseHeight ' : $ baseHeight。val()} if(flag){ console。日志(JSON。stringify(数据))；}返回数据；} //图片背景$('#imgload ').on('change '，function(){ imgToBase64(this。文件[0])、函数(结果){控制台。日志(结果)；var base 64 DATa=' URL(' result ')'；$(画布)。CSS({ ' background-image ' : base64 data })；$baseImg=结果；});});//转化为base64function imgToBase64(文件，回调){ var reader=new FileReader()；读者。onload=function(e){ callback(e . target。结果)；};reader.readAsDataURL(文件);//读取完后会调用装载方法} //确认信息$cover.on('click '，').contain '，function(){ if($ urladdress。val()==' '){ alert('地址不能为空');} else { Modulelist。push({ id : GetName()、path:path、url:$urlAddress.val()、dec : $ dec . val()})；路径=[];$封面。add CLaSS(' hide ')；}});//修改高度和宽度$baseWidth.on('change '，function(){ $(canvas).css({'width': $(this).val()})；});$baseHeight.on('change '，function(){ $(canvas).CSS({ ' height ' : $(this)} .val()})；});//随机获取名称函数getName(){ var timer=new Date()；var arr=JSON.stringify(计时器)。替换(/:|-|'/g ' ').拆分('。');var str=arr。join(')；返回字符串；} //导入模板函数getData(){ var data=JSON。解析(本地存储。getitem(' data ')；if(data){ Modulelist=data。模块；$ baseImg=data.img绘制（数据);}else{ alert('没有模板数据。');}} //撤销函数reduo(){ Modulelist。pop()；ctx.clearRect(0，0，canvas.width，canvas。高度)；绘图(Seedata())；} //清除所有函数clearAll(){ Modulelist=[]；ctx.clearRect(0，0，canvas.width，canvas。高度)；} //给数据，画出来函数制图(数据){ CTX。清除矩形(0，0，canvas.width，canvas。高度)；定义变量模块=DATa . module var base 64 DATa=' URL(' DATa。img ')'；$(画布)。CSS({ ' background-image ' : base64 data })；$ BaseWidth。val(数据。base width)；$ BaseHeight。val(数据。baseHeight)；$(画布)。CSS({ ' width ' :数据。basewidth，' height ' :数据。base height })；//开始画for(var I=0；我模块。长度；i ){ var path=module[i].路径；CTX。begin path()；ctx.moveTo(路径[0]。x，路径[0]。y)；for(var j=1；j。路径长度；j ){ ctx.lineTo(路径[j]).x，路径[j].y)；CTX。笔画()；} CTX。close path()；}}最后是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-scale=no '/style type=' text/CSS ' * { padd : 0 0；保证金： 0；}正文，html { width : 100%；高度： 100%;}画布{背景-位置： 0；背景-重复：不重复；背景尺寸： 100% 100%;宽度： 100%;高度： 100%;} .将{ border: 1px纯红包裹起来；margin: 0自动宽度： 800像素；高度： 600像素；}/style/head body div class=' wrap ' canvas id=' canvas '/canvas/div/body script type=' text/JavaScript ' src=' http : js/jquery。js '/script脚本类型=' text/JavaScript ' var $ canvas=$(' # canvas ')；var canvas=$ canvas[0]；var数据=JSON。解析(本地存储。getitem(' data ')；var CTX=画布。get context(' 2d ')；CTX。线宽=1；ctx.strokeStyle='rgba(0，0，0，0)'；定义变量模块=data . modulevar rate width=$ canvas。width()/data。basewidth可变汇率高度=$ canvas。高度()/数据。基本高度；var base 64 DATa=' URL(' DATa。img ')'；$帆布。CSS({ ' background-image ' : base64 data })；控制台。日志(rate width)；控制台。log(rate height)；//判断点击了图片的某个地方帆布。onclick=函数(e){ var x=事件。pagex-画布。getboundingclientrect().向左；var y=事件。佩吉画布。getboundingclientrect().顶部；for(var I=0；我模块。长度；i ){ var path=module[i].路径；CTX。begin path()；ctx.moveTo(路径[0]。x*rateWidth，路径[0]。y *速率高度)；for(var j=1；j。路径长度；j ){ ctx.lineTo(路径[j].x*rateWidth，路径[j].y *速率高度)；} CTX。close path()；if(ctx.isPointInPath(x，y)){点击调用(module[I])；返回；} } };//点击中了选中的区域函数单击调用(结果){控制台。日志(结果。dec)；控制台。日志(结果。网址)；}/脚本/html效果

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