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);//根據(jù)截圖操作的坐標和寬高，獲取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
