html5仿小红书的图片标签功能

　　最近做了这样的一个功能，在wap网页上实现类似小红书app里的图片标签功能，很是蛋疼。

　　上传页示例如下图：

　　可以看到最上面的①是展示区域，也是编辑标签的操作区域；中间②是可滑动的缩略图，在此选择要编辑的图片；最下面③是“添加图片”和“添加标签”两个按钮。

　　废话不多说，下面介绍具体实现思路。

　　首先就是要有“选择图片”的按钮。

<input type="file" name="fileToUpload" accept="image/*" multiple onchange="fileSelectHandler()" id="image_file" />

　　其中的 multiple 属性是一次多选多张图片，但并不是所有浏览器都支持，比如UC，如果不支持就只能多选几次了。

　　fileSelectHandler()的作用是处理你所选择的图片文件，首先要将图片显示在②的区域，这里的滑动效果是用swiper.js实现的，有兴趣的同学可以百度一下，有中文官网。但是手机拍照动不动就几兆的图片，不利于上传，而且手机浏览器处理时会有明显卡顿，所以需要压缩后再使用。

function fileSelectHandler() {
    //...
    //获取文件
    var oFile = $('#image_file')[0].files;
    for (var j = 0; j < oFile.length; j++) {
        var oReader = new FileReader();
        oReader.readAsDataURL(oFile[j]);
        oReader.onloadend = function (e) {
            var img = new Image();
            img.src = this.result;
            img.onload = function () {
                ctx.clearRect(0, 0, ww.width, ww.height);
                //兼容苹果手机
                var mpImg = new MegaPixImage(img);
                mpImg.render(canvas, { maxWidth: 1000, maxHeight: 1000, quality: 0.1 });
               
                var newImageData = canvas.toDataURL("image/jpeg", 0.3);
                var result_image_obj = new Image();
                result_image_obj.src = newImageData;
                imgkey++;
                var imgdata = dataURItoBlob(newImageData);//转码
                fd.append("file" + imgkey, imgdata);//压入FormData等待提交
                swiper.appendSlide("<div class=\"swiper-slide\"><a href=\"javascript:;\"><img key=\"" + imgkey + "\" onclick=\"clickImg(this)\" src=\"" + result_image_obj.src + "\" /></a></div>");
            }
        }
    }
}

　　这里有一个坑，就是苹果手机对canvas的限制，包括图片大小以及canvas尺寸的限制，如果这里使用drawImage()来画canvas的话，一旦图片超出限制，是画不出来的，所以这里使用了megapix-image.js来绘制图片，有兴趣的同学看这里： ios-imagefile-megapixel 

　　这样②区域就已经显示刚刚选取的图片了，我们需要点击其中一个，使其展现在①区域来进行下一步操作，而①区域就是一个canvas。

 function clickImg(e) {
      //全局变量，记录当前操作的图片src
      currentimgsrc = e.src;     
      //全局变量，记录当前操作的图片顺序标识
      flag = e.attributes.key.nodeValue;
      //核心方法，将所选图片及其所有标签绘到①区
      drawMyCanvas();
 }

　　在实现drawMyCanvas()方法前需要先解决图片及图片标签的存储问题，我们可以有多张图片，而每一张图片又可以有多个标签，因此，我的思路是由一个Dictionary来存储。

//键值对Dictionary
function Dictionary() {
     this.data = new Array();
     this.put = function (key, value) {
            this.data[key] = value;
     };
     this.get = function (key) {
            return this.data[key];
     };
}
var images = new Dictionary();

　　Dictionary的key就是图片的顺序标识，即<img>元素的key属性值，而value则是一个Array,存储的就是标签集合，如下：

//图片标签
function myLabel(x, y, radius, color,text) {
        this.x = x;//坐标X
        this.y = y;//坐标Y
        this.radius = radius;//半径
        this.color = color;//颜色
        this.isSelected = false;//是否是当前选中，拖动标签时用
        this.text = text;//标签文字
}

　　解决了存储，现在来为一个图片添加一个标签吧。

//在某个范围内生成随机数
function randomFromTo(from, to) {
        return Math.floor(Math.random() * (to - from + 1) + from);
}
//添加标签
function addMyLabel(e) {
        // 为圆圈设定一个大小和随机位置
        var radius = 10;
        //sidelength是canvas的边长(canvas是个正方形)
        var x = randomFromTo(0, sidelength-30);
        var y = randomFromTo(0, sidelength-30);

        var text = $("#labeltxt").val();//标签文字
        // 创建一个新标签
        var lab= new myLabel(x, y, radius, "white",text);

        // 把它保存在数组中
        if (images.get(flag) == undefined) { //还记得前面的flag变量吧
            var a=new Array();
            a.push(lab);
            images.put(flag,a);
        } else {
            images.get(flag).push(lab);
        }
        // 重新绘制画布
        drawMyCanvas();
}

　　好了，现在我们来看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()方法不断重绘画布，具体实现大家可以参考这篇文章:

　　----->HTML5 - Canvas的使用样例14（图形增加鼠标点击、拖动交互）　　

　　这篇文章给了我很大帮助，感谢。