jQuery Jcrop 图像裁剪插件的使用

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