qml实现头像裁剪功能

效果

首先了解一下flickable

flickable在确定高度宽度后，使用contentWidth,contentHeight绑定内容大小，当内容大小大于flickable大小时，flickable会自动提供滚动条以便鼠标拖动查看。

所以打开一个图片后要先调整适合flickable，前提是保持比例，不然根据图片的比例缩放.
假设flickable是一个正方形，如果图片长宽比为1:2等，那么就要把长缩放为flickable的宽，宽按原比例缩放

width: Math.abs((implicitHeight-implicitWidth)/implicitWidth)<0.2?flickable.width:(implicitHeight>implicitWidth?flickable.width:implicitWidth*flickable.height/implicitHeight);
height: Math.abs((implicitHeight-implicitWidth)/implicitWidth)<0.2?flickable.height:(implicitHeight<implicitWidth?flickable.height:implicitHeight*flickable.width/implicitWidth);

implicitWidth指图片的原始宽度(即Image控件不设置长度宽度时的默认长宽)

放缩的话可以通过增加减少image的width和height

绘制选择圆框

填充flickable半透明黑，再挖去内切圆

        Canvas
        {
            id: canvas
            //覆盖flickable
            anchors.fill: flickable;
            height: window.width;//创建的窗口大小
            onPaint: {
                var ctx = getContext("2d");
                ctx.fillStyle="rgba(0,0,0,0.5)";
                ctx.fillRect(0,0,width,height);//覆盖透明黑

                ctx.globalCompositeOperation = "qt-clear";//该模式下将会从原图像除去绘制的内容
                ctx.beginPath();
                ctx.arc(width / 2, height / 2, width/2, 0, 2 * Math.PI);//圆心x,圆心y,半径，开始,结束角度
                ctx.fill();
            }
        }

如何截取

我的方法是按钮按下loader加载component执行函数
首先flickable内部有内容时，会以内容建立坐标系，左上角为原点，flickable.contentX就是flickable左上角在内容上的x坐标(会随移动而改变)

由于显示的图像是缩放过的，所有flickable在缩放后的图像的x坐标实际上是原图中
flickable.contentX/scaleX
property double scaleX: image.width/image.implicitWidth;(放缩比)
drawImage后面4个参数是在canvas上的矩形区域绘制

完成后toDataURL()返回图片base64数据(该数据可以转为字符串，且可以直接用于存储和image的source)

        Loader
        {
            id:loader;
            anchors.fill: flickable;
            visible: false;
        }

        Component
        {
            id:com;
            Canvas
            {
                renderTarget: Canvas.Image;
                property double scaleX: image.width/image.implicitWidth;

                property double scaleY: image.height/image.implicitHeight;
                width: flickable.width;
                height: flickable.height;

                onPaint:
                {
                    var ctx = getContext("2d");

                    //截取可视部分
                    ctx.drawImage(image,flickable.contentX/scaleX , flickable.contentY/scaleY, flickable.width/scaleX, flickable.height/scaleY, 0, 0, flickable.width, flickable.height);
            
                    changeSig(toDataURL());
                    close();
                }
            }
        }