<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--在HTML头部加入：--> <link type="text/css" href="https://www.jb51.net/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /> <script type="text/javascript" src="https://www.jb51.net/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#photo').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview}); }); // 如果加上aspectRatio: '1:1'，$('#photo').imgAreaSelect( {aspectRatio: '1:1',handles:true, fadeSpeed:200, onSelectEnd : preview});则选取区域固定为正方形。 function preview(img, selection) { //等同于var scaleX = 100 / (selection.width || 1) //先对||前面的进行布尔运算,如果结果是true(即width存在且不是0),就使用width,否则使用||后的变量1 //也就是先检查 selection.width 有没有值，有的话就用 100 / 该值再付给 scaleX，没的话就用 100 / 1 来赋值； if(!selection.width || !selection.height) return; var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; //设置裁剪后图片的宽高 $('#preview img').css( { width : Math.round(scaleX * 200), height: Math.round(scaleY * 200), marginLeft: -Math.round(scaleX * selection.x1), marginTop: -Math.round(scaleY * selection.y1) }); $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('w').val(selection.width); $('h').val(selection.height); } </script> </head> <body> <div> <!--选取的图片--> <div> <p> Click and drag on the image to select an area. </p> <div> <img src="https://www.jb51.net/article/images/1.jpg"/> </div> </div> <!--截取的图片--> <div> <p> Selection Preview </p> <div> <div> <img src="https://www.jb51.net/article/images/1.jpg"> </div> </div> <table> <thead> <tr> <th colspan="2"> Coordinates</th> </tr> </thead> <tbody> <tr> <td><b>X<sub>1</sub>:</b></td> <td><input type="text" value="-" /></td> </tr> <tr> <td><b>Y<sub>1</sub>:</b></td> <td><input type="text" value="-" /></td> </tr> <tr> <td><b>X<sub>2</sub>:</b></td> <td><input type="text" value="-" /></td> </tr> <tr> <td><b>Y<sub>2</sub>:</b></td> <td><input type="text" value="-" /></td> </tr> </tbody> </table> </div> </div> </body> </html>
以上所述是小编给大家介绍的jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: