步骤
1 截图，使用插件 cropper.js
// 引入样式和js,需要使用 jQuery
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.3/cropper.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.0-beta3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.1.3/cropper.min.js"></script>
<!-- html -->
<div class="box">
<img id="image" src="./test.jpg">
</div>
$('#image').cropper({
aspectRatio: 16 / 9, // 截取的高宽比
viewMode:1,
crop: function (e) { // 主要使用截取属性，e.x , e.y, e.width, e.height
ctx2.drawImage(image, e.x, e.y, e.width, (e.height/pre_h1)*pre_h2, 0, 0, pre_w2, pre_h2);
})
}
2 将imgElement中的图片用canvas进行绘制，
//如果此图片是来自其他域，即跨域图片，要使用下一行，否则会报错
imgElement.setAttribute('crossOrigin', 'anonymous');
// 将从图片左上角（33, 71）的位置开始，截取 164宽，124高的区域，在画布左上角（21, 20）处起，宽87，高104 的区域内绘制
ctx.drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
3 渲染或预览，有两种方式(base64一种，blob两种，总共三种)
使用base64的方式
var bs64 = canvasElement.toDataURL("image/jpeg")
imgElement2.src = bs64
blob方式1 ： 需要将base64转为blob, 然后将blob转为DomString，就可以了。
var b = dataURItoBlob(bs64 ) // 将base64 转为blob
imgElement2.src = window.URL.createObjectURL(b) // 将blob转为文件，此处为图片文件
// 将base64转为blob
function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
}
blob方式2： 直接将canvas画布上的图片转为blob，然后放入ingElement的src中
// 直接用canvas将画布上的图片转为blob,不需要经过base64
// canvasElement.toBlob(callback, type, encoderOptions);
// 参数1为转换后的回调，回调参数为转换后的blob;必选
// 参数2为指定图片格式，默认为image/png，即png；可为image/jpeg或者image/webp；可选
// 参数3为值在0与1之间的数值，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量; 可选
canvasElement2.toBlob(function(blob) {
imgElement.src = window.URL.createObjectURL(blob)
})
4 上传图片到后台
将得到blob放入fomdata中，然后将formdata直接作为data提交给后台
var fd = new FormData(); // 将blob放入formdata中上传给后台
fd.append("file", blob, 'i.jpeg');
$.ajax({
url: url,
type:"post",
data: fd ,
success:function(data){。。。}
});
###############################################################
