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

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

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

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

首先是工具

首先工具的html

*{

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;

}

接着是工具的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预览

*{

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;

}

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);

}

效果

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

您可能感兴趣的文章: