html5仿小紅書的圖片標籤功能

標籤：addm   wim   auto   get   rip   中文   line   技術   define   

　　最近做了這樣的一個功能，在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; 5     for (var j = 0; j < oFile.length; j++) { 6         var oReader = new FileReader(); 7         oReader.readAsDataURL(oFile[j]); 8         oReader.onloadend = function (e) { 9             var img = new Image();10             img.src = this.result;11             img.onload = function () {12                 ctx.clearRect(0, 0, ww.width, ww.height);13                 //相容蘋果手機14                 var mpImg = new MegaPixImage(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 = new Image();19                 result_image_obj.src = newImageData;20                 imgkey++;21                 var 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       //全域變數，記錄當前操作的圖片src3       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(); 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就是圖片的順序標識，即<img>元素的key屬性值，而value則是一個Array,儲存的就是標籤集合，如下：

1 //圖片標籤2 function myLabel(x, y, radius, color,text) {3         this.x = x;//座標X4         this.y = y;//座標Y5         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=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()方法不斷重繪畫布，具體實現大家可以參考這篇文章:

　　----->HTML5 - Canvas的使用範例14（圖形增加滑鼠點擊、拖動互動）　　

　　這篇文章給了我很大協助，感謝。

html5仿小紅書的圖片標籤功能