HTML5 image label function of Little Red Book

Recently done such a function, in the WAP Web page similar to the small Red Book app in the image tag function, it is the egg pain.

The upload page shows for example:

You can see the top ① is the display area, but also the operation area of the edit label, the Middle ② is a sliding thumbnail, where you select the picture you want to edit; the bottom ③ is the "Add Picture" and "Add Label" two buttons.

Needless to say, the following describes the specific implementation ideas.

The first is to have a "Select Picture" button.

1 <input type="file" name="filetoupload" accept= " image/* " multiple onchange="fileselecthandler ()" id="Image_ File" />

The Multiple property is a multiple-selection picture at a time, but not all browsers support it, such as UC, which can be selected several times if not supported.

Fileselecthandler () is the role of the processing of your choice of image files, the first to display the picture in the ② area, where the sliding effect is implemented with Swiper.js, interested students can Baidu, there is a civil service network. But mobile phone photos are still a few megabytes of pictures, not conducive to uploading, and mobile browser processing will have obvious lag, so need to compress and then use.

1 function Fileselecthandler () {2     //...3     //Get File4     varOfile = $ ('#image_file')[0].files;5      for(varj =0; J < Ofile.length; J + +) {6         varOreader =NewFileReader ();7 Oreader.readasdataurl (Ofile[j]);8Oreader.onloadend =function (e) {9             varIMG =NewImage ();TenIMG.SRC = This. Result; OneImg.onload =function () { ACtx.clearrect (0,0, Ww.width, ww.height); -                 //compatible with Apple phones -                 varMpimg =Newmegapiximage (IMG); theMpimg.render (canvas, {maxWidth: +, MaxHeight: +, Quality:0.1 }); -                 -                 varNewimagedata = Canvas.todataurl ("Image/jpeg",0.3); -                 varResult_image_obj =NewImage (); +RESULT_IMAGE_OBJ.SRC =Newimagedata; -imgkey++; +                 varImgdata = Datauritoblob (Newimagedata);//transcoding AFd.append ("file"+ Imgkey, imgdata);//Press-in Formdata pending submission atSwiper.appendslide ("<div class=\ "swiper-slide\" ><a href=\ "javascript:;\" >"+ Imgkey +"\ "Onclick=\" clickimg (this) \ "Src=\""+ RESULT_IMAGE_OBJ.SRC +"\ "/></a></div>"); -             } -         } -     } -}

Here is a pit, the Apple mobile phone restrictions on the canvas, including the size of the picture and the size of the canvas, if you use DrawImage () to draw canvas, once the picture is beyond the limit, it is not drawn, So here is the use of megapix-image.js to draw pictures, interested classmates see here: Ios-imagefile-megapixel

So that the ② area has already shown the image you just selected, we need to click on one to show it in the ① area for the next step, and the ① area is a canvas.

1 function Clickimg (e) {2       // global variable, record the current operation of the picture Src 3       CURRENTIMGSRC = e.src;      4       // global variables, which record the order of the pictures in the current operation 5       flag = E.attributes.key.nodevalue; 6       // Core method to plot the selected picture and all its tags into the ① area 7       Drawmycanvas (); 8  }

Before implementing the Drawmycanvas () method needs to solve the picture and the picture label storage problem, we can have more than one picture, and each picture can have more than one label, therefore, my idea is to be stored by a dictionary.

1 //Key-value pair dictionary2 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      };Ten } One varImages =NewDictionary ();

The key of dictionary is the sequential identification of the image, that is, the key attribute value of the element, and value is an array, which stores the tag collection as follows:

1 //Picture Label2 function MyLabel (x, y, radius, color,text) {3          This. x = x;//coordinates x4          This. y = y;//Coordinate y5          This. radius = radius;//radius6          This. color = color;//Color7          This. isSelected =false;//is currently selected, drag the label with8          This. Text = text;//Label Text9}

Fix the store, now to add a label to a picture.

1 //generate random numbers within a range2function Randomfromto ( from, to) {3         returnMath.floor (Math.random () * (To- from+1) + from);4 }5 //Add Tags6 function Addmylabel (e) {7         //set a size and random position for a circle8         varRadius =Ten;9         //Sidelength is the canvas's side length (canvas is a square)Ten         varx = Randomfromto (0, sidelength- -); One         vary = Randomfromto (0, sidelength- -); A  -         varText = $ ("#labeltxt"). Val ();//Label Text -         //Create a new label the         varlab=NewMyLabel (x, y, radius," White", text); -  -         //save it in the array -         if(Images.Get(flag) = = undefined) {//Remember the previous flag variable? +             varA=NewArray (); - A.push (Lab); + Images.put (flag,a); A}Else { atImages.Get(flag). push (Lab); -         } -         //Redraw the canvas - Drawmycanvas (); -}

OK, now let's look at the Drawmycanvas () method.

function Drawmycanvas () {varIMG =NewImage (); IMG.SRC= IMGSRC;//This is also the previous global variableImg.onload =function () {Context.clearrect (0,0, Canvas.width, canvas.height); Context.drawimage (IMG,0,0, Canvas.width, canvas.height); //Traverse all tabs of the current picture               for(vari =0; I < images.Get(flag). length; i++) {                  varOnelabel= images.Get(flag) [i]; //draw a dot of a labelContext.globalalpha =0.85;                  Context.beginpath (); Context.arc (onelabel.x, Onelabel.y, Onelabel.radius,0, Math.PI *2); Context.fillstyle=Onelabel.color; Context.strokestyle=" White"; //the selected labels are thicker so that they are differentiated (label dragging)                  if(onelabel.isselected) {context.linewidth=2; }                  Else{context.linewidth=1; }                  //draw a polyline between dots and textContext.moveto (onelabel.x, ONELABEL.Y); Context.lineto (onelabel.x+ the, Onelabel.y- -); Context.moveto (onelabel.x+ the, Onelabel.y- -); Context.lineto (onelabel.x+ -, Onelabel.y- -);                  Context.fill ();                  Context.stroke (); //Draw Label TextContext.font ="bold 20px Arial"; Context.filltext (Onelabel.text, onelabel.x+ -, Onelabel.y- the); }          }      }

Finally, the function of the label movement, the general idea is to update the label's coordinates with the drag event, and call the Drawmycanvas () method to constantly redraw the canvas, specific implementation can refer to this article:

----->html5-canvas Example 14 (Graphics increase mouse click, drag interaction)

This article has given me a lot of help, thanks.

HTML5 image label function of Little Red Book