插件
这里用到一个图片裁剪jQuery插件Cropper，是杭州的前端工程师Fengyuan Chen所写的，功能相当丰富，裁剪时还可以对原图进行旋转。
<link rel="stylesheet" href="http://sandbox.runjs.cn/uploads/rs/269/px1iaa72/cropper.min.css" /><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="http://sandbox.runjs.cn/uploads/rs/269/px1iaa72/cropper.min.js"></script>引用资源，cropper.min.js,cropper.min.css 放在了runjs上，js为28k，css4k。
html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="http://sandbox.runjs.cn/uploads/rs/269/px1iaa72/cropper.min.css" /><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="http://sandbox.runjs.cn/uploads/rs/269/px1iaa72/cropper.min.js"></script><style>.img-con {width: 800px;height: 400px;border: 1px solid #ccc;float: left;}.img-pre {width: 400px;height: 400px;float: right;border: 1px solid #eee;}.img-pre img {width: 180px;height: 180px;padding: 10px;}.img-con img {width: 100%;height: 100%;}</style></head><body><div id="img_container" class="img-con"><img src="" alt=""></div><div class="img-pre"></div><button class="btn">裁剪</button><button class="change-img2">图2</button><script>var $image = $('#img_container img');var imgurl = 'http://sandbox.runjs.cn/uploads/rs/269/px1iaa72/1-1504051354254R.png';var imgurl2 = 'http://sandbox.runjs.cn/uploads/rs/269/px1iaa72/psb.jpg';$image.attr("src", imgurl);$image.on("load", function() { // 等待图片加载成功后，才进行图片的裁剪功能$image.cropper({aspectRatio: 1 / 1 // 1：1的比例进行裁剪，可以是任意比例，自己调整});});$('.btn').on("click", function() {console.log("裁剪");var src = $image.eq(0).attr("src");var canvasdata = $image.cropper("getCanvasData");var cropBoxData = $image.cropper('getCropBoxData');convertToData(src, canvasdata, cropBoxData, function(basechar) {// 回调后的函数处理 console.log(basechar);var imgDom = document.createElement('img');imgDom.src = basechar;$('.img-pre').append(imgDom);});});$('.change-img2').on('click', function() {$image.eq(0).attr("src", imgurl2);$('.cropper-canvas img').attr("src", imgurl2);$('.cropper-view-box img').attr("src", imgurl2);});function convertToData(url, canvasdata, cropdata, callback) {var cropw = cropdata.width; // 剪切的宽var croph = cropdata.height; // 剪切的宽var imgw = canvasdata.width; // 图片缩放或则放大后的高var imgh = canvasdata.height; // 图片缩放或则放大后的高var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置var canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');canvas.width = cropw;canvas.height = croph;var img = new Image();img.src = url;img.onload = function() {this.width = imgw;this.height = imgh;// 这里主要是懂得canvas与图片的裁剪之间的关系位置ctx.drawImage(this, poleft, potop, this.width, this.height);var base64 = canvas.toDataURL('image/jpg', 1); // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小callback && callback(base64) // 回调base64字符串}}</script></body></html>效果
demo地址
js图片裁剪生成base64格式
本demo中只用到了部分Cropper的功能，了解更多可查看 Cropper项目地址 | Cropper Demo