小红书 标签 HTML5,html5仿小红书的图片标签功能
最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼。
上传页示例如下图:
可以看到最上面的①是展示区域,也是编辑标签的操作区域;中间②是可滑动的缩略图,在此选择要编辑的图片;最下面③是“添加图片”和“添加标签”两个按钮。
废话不多说,下面介绍具体实现思路。
首先就是要有“选择图片”的按钮。
1
其中的 multiple 属性是一次多选多张图片,但并不是所有浏览器都支持,比如UC,如果不支持就只能多选几次了。
fileSelectHandler()的作用是处理你所选择的图片文件,首先要将图片显示在②的区域,这里的滑动效果是用swiper.js实现的,有兴趣的同学可以百度一下,有中文官网。但是手机拍照动不动就几兆的图片,不利于上传,而且手机浏览器处理时会有明显卡顿,所以需要压缩后再使用。
1 function fileSelectHandler() {2 //...3 //获取文件
4 var oFile = $(\'#image_file\')[0].files;5 for (var j = 0; j < oFile.length; j++) {6 var oReader = newFileReader();7 oReader.readAsDataURL(oFile[j]);8 oReader.onloadend =function (e) {9 var img = newImage();10 img.src = this.result;11 img.onload =function () {12 ctx.clearRect(0, 0, ww.width, ww.height);13 //兼容苹果手机
14 var mpImg = newMegaPixImage(img);15 mpImg.render(canvas, { maxWidth: 1000, maxHeight: 1000, quality: 0.1});16
17 var newImageData = canvas.toDataURL("image/jpeg", 0.3);18 var result_image_obj = newImage();19 result_image_obj.src =newImageData;20 imgkey++;21 var imgdata = dataURItoBlob(newImageData);//转码
22 fd.append("file" + imgkey, imgdata);//压入FormData等待提交
23 swiper.appendSlide("
");24 }25 }26 }27 }
这里有一个坑,就是苹果手机对canvas的限制,包括图片大小以及canvas尺寸的限制,如果这里使用drawImage()来画canvas的话,一旦图片超出限制,是画不出来的,所以这里使用了megapix-image.js来绘制图片,有兴趣的同学看这里:ios-imagefile-megapixel
这样②区域就已经显示刚刚选取的图片了,我们需要点击其中一个,使其展现在①区域来进行下一步操作,而①区域就是一个canvas。
1 function clickImg(e) {2 //全局变量,记录当前操作的图片src
3 currentimgsrc =e.src;4 //全局变量,记录当前操作的图片顺序标识
5 flag =e.attributes.key.nodeValue;6 //核心方法,将所选图片及其所有标签绘到①区
7 drawMyCanvas();8 }
在实现drawMyCanvas()方法前需要先解决图片及图片标签的存储问题,我们可以有多张图片,而每一张图片又可以有多个标签,因此,我的思路是由一个Dictionary来存储。
1 //键值对Dictionary
2 function Dictionary() {3 this.data = newArray();4 this.put =function (key, value) {5 this.data[key] =value;6 };7 this.get =function (key) {8 return this.data[key];9 };10 }11 var images = new Dictionary();
Dictionary的key就是图片的顺序标识,即元素的key属性值,而value则是一个Array,存储的就是标签集合,如下:
1 //图片标签
2 function myLabel(x, y, radius, color,text) {3 this.x = x;//坐标X
4 this.y = y;//坐标Y
5 this.radius = radius;//半径
6 this.color = color;//颜色
7 this.isSelected = false;//是否是当前选中,拖动标签时用
8 this.text = text;//标签文字
9 }
解决了存储,现在来为一个图片添加一个标签吧。
1 //在某个范围内生成随机数
2 function randomFromTo(from, to) {3 return Math.floor(Math.random() * (to - from + 1) + from);4 }5 //添加标签
6 function addMyLabel(e) {7 //为圆圈设定一个大小和随机位置
8 var radius = 10;9 //sidelength是canvas的边长(canvas是个正方形)
10 var x = randomFromTo(0, sidelength-30);11 var y = randomFromTo(0, sidelength-30);12
13 var text = $("#labeltxt").val();//标签文字14 //创建一个新标签
15 var lab= new myLabel(x, y, radius, "white",text);16
17 //把它保存在数组中
18 if (images.get(flag) == undefined) { //还记得前面的flag变量吧
19 var a=newArray();20 a.push(lab);21 images.put(flag,a);22 } else{23 images.get(flag).push(lab);24 }25 //重新绘制画布
26 drawMyCanvas();27 }
好了,现在我们来看drawMyCanvas()方法吧。
function drawMyCanvas() {var img = newImage();
img.src= imgsrc;//这也是前面的全局变量
img.onload =function () {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img,0, 0, canvas.width, canvas.height);//遍历当前图片的所有标签
for (var i = 0; i < images.get(flag).length; i++) {var onelabel= images.get(flag)[i];//绘制标签的圆点
context.globalAlpha = 0.85;
context.beginPath();
context.arc(onelabel.x, onelabel.y, onelabel.radius,0, Math.PI * 2);
context.fillStyle=onelabel.color;
context.strokeStyle= "white";//选中的标签变粗,以便区分(标签拖动)
if(onelabel.isSelected) {
context.lineWidth= 2;
}else{
context.lineWidth= 1;
}//绘制圆点与文字之间的折线
context.moveTo(onelabel.x, onelabel.y);
context.lineTo(onelabel.x+ 15, onelabel.y - 20);
context.moveTo(onelabel.x+ 15, onelabel.y - 20);
context.lineTo(onelabel.x+ 30, onelabel.y - 20);
context.fill();
context.stroke();//绘制标签文字
context.font = "bold 20px 宋体";
context.fillText(onelabel.text, onelabel.x+ 33, onelabel.y - 15);
}
}
}
最后就是标签移动的功能了,大致的想法就是随着拖动事件即时更新标签的坐标,并调用drawMyCanvas()方法不断重绘画布,具体实现大家可以参考这篇文章:
这篇文章给了我很大帮助,感谢。
小红书 标签 HTML5,html5仿小红书的图片标签功能相关推荐
- html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- android 仿简书评论,Android 开发仿简书登录框可删除内容或显示密码框的内容
简书App 是我很喜欢的一款软件.今天就模仿了一下他的登录框.先上图: 好了下面上代码,自定义ImgEditText 继承与EditText.重写一些方法. package lyf.myimgedit ...
- android 仿网易标签切换,Android 仿网易新闻客户端Tab标签
Android 开源框架ViewPageIndicator和ViewPager仿网易新闻客户端Tab标签 http://blog.csdn.net/xiaanming/article/details/ ...
- 【HTML】html基本标签-1(文字,列表,图片标签)
文章目录 1.html规范 2.文字标签和注释标签 3.标题标签,水平线标签,特殊字符 4.列表标签 5.图片标签 6.路径的介绍 7.列表标签案例 1.html规范 html的规范:(1)<h ...
- android简书app源码,仿简书APP源码(android)
[实例简介] [实例截图] [核心代码] package com.yidou.wandou.example_33.ui; import android.content.Context; import ...
- [19/05/14-星期二] HTML_body标签(列表标签和图片标签)
一.列表标签 <!-- 快捷键 1.<meta charset="UTF-8"/> 用m6可直接写出2.复制当前1行到下一行 ctrl+shift+R --> ...
- android 仿小红书标签,Android 仿小红书图片标签
TagViewGroup Android 仿小红书图片标签,实现了图片标签的动画,布局,水波纹,编辑等功能,还可以自定义 Tag.视频演示地址 This is a library of tags th ...
- php仿小红书,Android仿小红书图片标签
TagViewGroup Android 仿小红书图片标签,实现了图片标签的动画,布局,水波纹,编辑等功能,还可以自定义 Tag.视频演示地址 Gradle Step 1.Add it in your ...
最新文章
- js里apply方法的简单实例
- 在Winform中菜单动态添加“最近使用文件”
- A Star寻路相关资料汇总
- 【英语学习】【Daily English】U11 Work L02 Just be honest
- 【转载】小米2进入recovery的方法
- Sentinel热点Key降级下_分布式系统集群限流_线程数隔离_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0043
- 视讯稳定的程序在gpu 那台电脑上没有问题 在自己的电脑上一直报一个错误
- MyBatis使用log4j输出日志
- Vmware由于centos升级内核不可运行(C header files matching your running kernel were not found)的解决方案
- 基于springboot的医院门诊管理系统
- 《模拟电子技术》-童诗白
- win10无法启用shockwave flash object的解决
- 详述白盒测试的逻辑覆盖法的条件组合覆盖及其优缺点
- Flink - Watermark
- 恶意代码检测c语言,恶意代码检测分析软件
- Hadoop服务器集群崩溃的解决方案
- latex从入门到精通
- 常用开发工具 之 SQLite 数据库 与 Navicat for SQLite 的下载、安装与简单使用说明
- ccache高速编译工具
- Python 两个字典如何实现相加?(相同的键,值相加)