Mobile phone variable size avatar processing

Requirements:

The image size may be as follows: Width > Height, width < height, width = high requirement: Minimum width/height full box

1.CSS Background Implementation

Html

<H2>1. CSS3 Background Implementation</H2><Divclass= "M-box box-background box-background-w"></Div><Divclass= "M-box box-background box-background-h"></Div><Divclass= "M-box box-background box-background-wh"></Div>

Css

/*Suppose you already have the pictures you need in the demo .*/. M-box{width:100px;Height:100px;Border-radius:50%;Overflow:Hidden;Margin-bottom:20px;}. Box-background-w{Background-image:URL (img/400x200.jpg); }. Box-background-h{Background-image:URL (img/200x400.jpg); }. BOX-BACKGROUND-WH{Background-image:URL (img/400x400.jpg); }. Box-background{-webkit-background-size:cover;background-position:Center Center;background-repeat:no-repeat;}

2.JS realizes and Cuts

Html

<!--Suppose you already have the pictures you need in the demo . -<H2>2. JS implementation</H2><Divclass= "M-box"><imgclass= "J_cropimage"src= "Img/400x200.jpg"alt=""/></Div><Divclass= "M-box"><imgclass= "J_cropimage"src= "Img/200x400.jpg"alt=""/></Div><Divclass= "M-box"><imgclass= "J_cropimage"src= "Img/400x400.jpg"alt=""/></Div><CanvasID= "Canvas"width= "+"Height= "+"></Canvas><DivID= "after"></Div>

Css

{    width: 100px; height: 100px;     Border-radius: 50%;     Overflow: hidden;     margin-bottom: 20px;}  { padding: 10px;}  { margin: 10px;}

Js

// Usevaraimg = Document.getelementsbyclassname (' j_cropimage ')); for(varlen = aimg.length-1; Len >= 0; len--) {loadimg (Aimg[len], Aimg[len].getattribute (' SRC '));}functiongetById (ID) {returndocument.getElementById (ID);}//Loading Picturesfunctionloadimg (obj, src) {varIMG =NewImage (); IMG.SRC=src; Img.onload=function() {setimg (obj, IMG); };}//Set Picture Positionfunctionsetimg (O, img) {varwidth = img.width, height =Img.height, SX= 0, sy = 0, sw = 0, sh = 0, x = 0, y = 0, W = +, h = 100; if(Width >height) {        //Set height 100%, change widthO.style.csstext = ' height:100%; margin-left:50%; -webkit-transform:translatex ( -50%); Transform:translatex (-50%); '; SX= (width-height)/2; SH = SW =height; }    Else if(Height >width) {        //Set width 100%, change heightO.style.csstext = ' width:100%; margin-top:50%; -webkit-transform:translatey ( -50%); Transform:translatey (-50%); '; Sy= (height-width)/2; SH = SW =width; }    Else{        //equal, set width high 100%O.style.csstext = ' width:100%; height:100%; '; SH= SW =height; } cropimage (IMG.SRC, SX, SY, SW, SH, x, y, W, h);}//Picture Trimmingfunctioncropimage (SRC, SX, SY, SW, SH, x, y, W, h) {varOcanvas = getById (' Canvas '); if(!ocanvas.getcontext)return; varCTX = Ocanvas.getcontext (' 2d '); varOimg =NewImage (); OIMG.SRC=src; Oimg.onload=function() {ctx.drawimage (oimg, SX, SY, SW, SH, x, y, W, h); varresimg = document.createelement (' img '); RESIMG.SRC= Ocanvas.todataurl (' +image/png+ ', 0.8); GetById (' After '). appendchild (RESIMG); };}

Mobile phone variable size avatar processing