图片上传是许多网站的一个常用的功能，有时需要对上传的图片做初步的选择裁剪，比如上传头像。下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效，可以对选择要上传的图片做缩小、放大、拖动和裁剪，由何问起调试改进，有需要的朋友可以参考一下。在文后附有源码下载。
效果图：
需要引用的css文件为style.css，需要引用的js文件为jquery文件，可以到选择合适的版本下载，还需引用cropbox.js文件，这些文件在源码里面都有。
代码如下:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="width=device-width, initial-scale=1.0"> <title>jQuery拖动剪裁图片作为头像代码 - 何问起</title> <link href="https://www.jb51.net/css/style.css" type="text/css" /> </head> <body> <div> <div> <div></div> <div>Loading...</div> </div> <div> <div> <a href="javascript:void(0)"> <label for="upload-file">上传图像</label> </a> <input type="file" /> </div> <input type="button" value="裁切"> <input type="button" value="+" > <input type="button" value="-" > </div> <div></div> </div> <script src="https://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.jb51.net/js/cropbox.js"></script> <script type="text/javascript"> $(window).load(function() { var options = { thumbBox: '.thumbBox', spinner: '.spinner', imgSrc: 'img/rgevo2ea.jpg' } var cropper = $('.imageBox').cropbox(options); $('#upload-file').on('change', function(){ var reader = new FileReader(); reader.onload = function(e) { options.imgSrc = e.target.result; cropper = $('.imageBox').cropbox(options); } reader.readAsDataURL(this.files[0]); this.files = []; }) $('#btnCrop').on('click', function(){ var img = cropper.getDataURL(); $('.cropped').html(''); $('.cropped').append('<img src="'https://www.jb51.net/article/+img+'" ><p>64px*64px</p>'); $('.cropped').append('<img src="'https://www.jb51.net/article/+img+'"><p>128px*128px</p>'); $('.cropped').append('<img src="'https://www.jb51.net/article/+img+'"><p>180px*180px</p>'); }) $('#btnZoomIn').on('click', function(){ cropper.zoomIn(); }) $('#btnZoomOut').on('click', function(){ cropper.zoomOut(); }) }); </script> <div> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="https://hovertree.com/" target="_blank">何问起</a> <a href="https://hovertree.com/h/bjaf/7x8ev3fh.htm" target="_blank">说明</a></p> </div> </body> </html>