js 图片区域可点击，适配移动端，图片大小随意改变
实现图片区域可点击，实际上使用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" 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和jauery的路径。。
体验地址：如果需要，联系博主
js 图片区域可点击，适配移动端，图片大小随意改变的更多相关文章
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- C# 截取图片区域，并返回所截取的图片
/// <summary> /// 截取图片区域,返回所截取的图片 /// </summary> /// <param name="SrcImage" ...
- 2018.7.2 如何用js实现点击图片切换为另一图片，再次点击恢复到原图片
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 让 jQuery UI draggable 适配移动端
背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...
- PHP 文字，图片水印，缩略图，裁切成小图（大小变小）
文字水印基本思路:1.用getimagesize()获取图片的信息(as:大小,属性等):2.根据图片信息用imagecreatefromjpeg ()/imagecreatefromgif/imag ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- js可视区域图片懒加载
可视区域图片懒加载 实现原理,页面滚动时获取需要懒加载的图片,判断此图片是否在可视区域内,是则设置图片data-src地址为src地址,加载图片. html下载地址 <!DOCTYPE html ...
- 本地图片上传与H5适配知识
最近用到本地图片上传作为API的参数,在网上看了许多,记录一下,以后可能用的着(仅自己记录用,看不清请绕路) function getObjectURL(file) { var url = null ...
随机推荐
- 用nodejs搭建一个简单的服务监听程序
作为一个从业三年左右的,并且从事过半年左右PHP开发工作的前端,对于后台,尤其是对以js语言进行开发的nodejs,那是比较有兴趣的,虽然本身并没有接触过相关的工作,只是自己私下做的一下小实验,但是还 ...
- Python数据结构———队列
队列(Queue) 队列也是一系列有顺序的元素的集合,新元素的加入在队列的一端,叫做“队尾”(rear),已有元素的移除发生在队列的另一端,叫做“队首”(front),和栈不同的是,队列只能在队尾插入 ...
- Mac上的jdk
最近装jdk从网上找到的资料: 一.以前版本的Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/下.* JDK7 ...
- acm入门练习心得
A题 两数相加等于n相乘等于m 问是否存在两数 写了超级久没有写出来,因为我的思路是 把m的因子都找出来,加加看,看等不等于n.后来发现m的因子还要考虑负数的情况,还要考虑m是不是负数的情况.太过麻 ...
- 转发一篇好文：36氪翻译自medium的文章： 读书没有 KPI：为什么坚持“一年读 100 本书”没用？
你只是为了达成所谓的数量目标而读书. 编者按:读书本是一项安静.缓慢的活动,但随着现代社会节奏的加快,信息技术的广泛普及,读书这一行为模式也开始发生了变化.越来越多的人开始碎片化阅读,并且越来越多的文 ...
- Please check logcat output for more details
Please check logcat output for more details 小米第一次可以安装,后面就不行了,研究发现 手机里面有同名的apk,直接elipse重命名 就可以了. 小米us ...
- 文本分类-TensorRT优化结果对比图
做的文本二分类,使用tensorRT进行图优化和加速,输出预测概率结果对比如下: 从结果对比来看,概率值有微小的变化,但不影响最终的分类
- Java并发编程的4个同步辅助类（CountDownLatch、CyclicBarrier、Semphore、Phaser）
我在<jdk1.5引入的concurrent包>中,曾经介绍过CountDownLatch.CyclicBarrier两个类,还给出了CountDownLatch的演示案例.这里再系统总结 ...
- 【插头dp】 hdu4285 找bug
打模板的经验: 1.变量名取一样,换行也一样,不要宏定义 2.大小写,少写,大括号 #include<algorithm> #include<iostream> #includ ...
- Django：环境搭建
django环境配置 1.安装django pip install django #安装指定版本 pip install -v django==1.8.2 通过python shell查看版本,返回版 ...