1：插件的具体使用参考：http://code.ciaoca.com/jquery/jcrop/
2：有以上参考之后，相信都能在页面展示截图效果，但是具体怎么获取截图之后的图片，看以下操作
大致思路：Jcrop会提供给你鼠标在所操作图片的起始位置与操作的宽高，就是官方demo里的x，y，width，height
获取坐标跟宽高之后就是canvas操作了
let oC = document.getElementById('oCanvas')；
let img = document.getElementById('targetImg');
let imgW = parseInt( img.style.width); //img.width获取的是img图片本身的宽，跟通过style获取的width不一样
oC.width = oC.height = imgW ;//设置canvas的宽高与img的宽高一致，
let oCtx =oC.getContext("2d");//获取画布
oCtx.drawImage(img,0,0,300,300);//获取整个图片像素值
let gData = oCtx.getImageData(x, y, width, height);//根据截图操作的坐标和宽高，获取img相应位置的像素值
oCtx.clearRect(0,0,oC.width,oC.height);//清除画布
oC.width =width;oC.height = height;//重新设置canvas的宽高使之与获取的图片的像素宽高一致，达到canvas与画到画布上的图片宽高一致，不会产生透明或者黑色部分
oCtx.putImageData(gData, 0, 0);//将获取的图片在画布展示
$('#one').css('backgroundImage', "url("+oC.toDataURL("image/jpeg")+")");//改变背景
// oC.toDataURL("image/jpeg")将canvas图片转成base62格式，并赋值给背景的url
关于toDataURL的详细介绍，自行谷歌
var base64Data = oC.toDataURL().replace(/^data:image\/\w+;base64,/, "");
以下为将图片保存到本地
var dataBuffer = new Buffer(base64Data, 'base64');//将图片转为
fs.writeFile("image.png", dataBuffer, function(err) {
if(err){
console.log('err');
}else{
console.log("保存成功！");
}
});
注意：oCtx.drawImage(image,33,71,104,124,21,20,87,104);
drawImage(img,sx,sy,sw,sh,x,y,w,h)
此方法中，sx,sy,sw,sh，分别是img本身绝对真实的尺寸来算的，跟你设定的宽高没关系
x,y是在canvas上画画的启示坐标；w,h表示在canvas画多宽多高
详见：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage