首页 / HTML5 / html5仿小红书的图片标签功能
html5仿小红书的图片标签功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了html5仿小红书的图片标签功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4374字,纯文字阅读大概需要7分钟。
内容图文
最近做了这样的一个功能,在wap网页上实现类似小红书app里的图片标签功能,很是蛋疼。
上传页示例如下图:
可以看到最上面的①是展示区域,也是编辑标签的操作区域;中间②是可滑动的缩略图,在此选择要编辑的图片;最下面③是“添加图片”和“添加标签”两个按钮。
废话不多说,下面介绍具体实现思路。
首先就是要有“选择图片”的按钮。
1 <input type="file" name="fileToUpload" accept="image/*" multiple onchange="fileSelectHandler()" id="image_file" />
其中的 multiple 属性是一次多选多张图片,但并不是所有浏览器都支持,比如UC,如果不支持就只能多选几次了。
fileSelectHandler()的作用是处理你所选择的图片文件,首先要将图片显示在②的区域,这里的滑动效果是用swiper.js实现的,有兴趣的同学可以百度一下,有中文官网。但是手机拍照动不动就几兆的图片,不利于上传,而且手机浏览器处理时会有明显卡顿,所以需要压缩后再使用。
1 function fileSelectHandler() { 2 // ... 3 // 获取文件 4 var oFile = $(‘#image_file‘)[0].files; 5for (var j = 0; j < oFile.length; j++) { 6var oReader = new FileReader(); 7 oReader.readAsDataURL(oFile[j]); 8 oReader.onloadend = function (e) { 9var img = new Image(); 10 img.src = this.result; 11 img.onload = function () { 12 ctx.clearRect(0, 0, ww.width, ww.height); 13//兼容苹果手机14var mpImg = new MegaPixImage(img); 15 mpImg.render(canvas, { maxWidth: 1000, maxHeight: 1000, quality: 0.1 }); 1617var newImageData = canvas.toDataURL("image/jpeg", 0.3); 18var result_image_obj = new Image(); 19 result_image_obj.src = newImageData; 20 imgkey++; 21var imgdata = dataURItoBlob(newImageData);//转码22 fd.append("file" + imgkey, imgdata);//压入FormData等待提交23 swiper.appendSlide("<div class=\"swiper-slide\"><a href=\"javascript:;\"><img key=\"" + imgkey + "\" onclick=\"clickImg(this)\" src=\"" + result_image_obj.src + "\" /></a></div>"); 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 = new Array(); 4this.put = function (key, value) { 5this.data[key] = value; 6 }; 7this.get = function (key) { 8returnthis.data[key]; 9 }; 10} 11var images = new Dictionary();
Dictionary的key就是图片的顺序标识,即<img>元素的key属性值,而value则是一个Array,存储的就是标签集合,如下:
1 // 图片标签 2 function myLabel(x, y, radius, color,text) { 3 this.x = x;//坐标X4this.y = y;//坐标Y5this.radius = radius;//半径6this.color = color;//颜色7this.isSelected = false;//是否是当前选中,拖动标签时用8this.text = text;//标签文字9 }
解决了存储,现在来为一个图片添加一个标签吧。
1 // 在某个范围内生成随机数 2 function randomFromTo(from, to) { 3return Math.floor(Math.random() * (to - from + 1) + from); 4} 5//添加标签 6function addMyLabel(e) { 7// 为圆圈设定一个大小和随机位置 8var radius = 10; 9//sidelength是canvas的边长(canvas是个正方形)10var x = randomFromTo(0, sidelength-30); 11var y = randomFromTo(0, sidelength-30); 1213var text = $("#labeltxt").val();//标签文字 14// 创建一个新标签15var lab= new myLabel(x, y, radius, "white",text); 1617// 把它保存在数组中18if (images.get(flag) == undefined) { //还记得前面的flag变量吧19var a=new Array(); 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 = new Image(); 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()方法不断重绘画布,具体实现大家可以参考这篇文章:
- Canvas的使用样例14(图形增加鼠标点击、拖动交互)' ref='nofollow'>----->HTML5 - Canvas的使用样例14(图形增加鼠标点击、拖动交互)
这篇文章给了我很大帮助,感谢。
原文:http://www.cnblogs.com/Qingxin1990/p/6142773.html
内容总结
以上是互联网集市为您收集整理的html5仿小红书的图片标签功能全部内容,希望文章能够帮你解决html5仿小红书的图片标签功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。