做了一个图片裁剪的功能，先上两张图

图1.

图2.

图1：是裁剪之前，黄色背景是canvas, 代码中宽高分别为canvasWidth, canvasHeight

白色的四角框是裁剪区域，代码中的宽高分别为cropRectWidth, cropRectHeight

裁剪区域距画布上边的距离为cropRectTop, 距画布左边的距离为cropRectLeft

图2：是点击裁剪完成之后的照片。红色是image的背景，可以看到照片只被裁剪了一个角。为什么呢?

代码大概流程为：

1、选择一张照片传递给canvas,

2、通过canvasCtx.drawImage(image, dx, dy, dWidth, dHeight)绘制图片，通过计算dx, dy, dWidth, dHeight 的值调整图片大小与位置使其适应裁剪框的大小

3、裁剪图片，将裁剪后的图片显示到image中，以下是裁剪代码：

（参数x和y理论上应该就是cropRectLeft与cropRectTop，为什么只裁剪出一个角呢？

在步骤2中调整图片大小与位置时，给cavasCtx.drawImage()传递的参数dx,dy也是通过cropRectLeft与cropRectTop计算得到的，按理说不应该有错）

wx.canvasToTempFilePath({
                x: this.data.cropRectLeft,
                y: this.data.cropRectTop,
                width: this.data.cropRectWidth,
                height: this.data.cropRectHeight,
                destWidth: this.data.cropRectWidth,
                destHeight: this.data.cropRectHeight,
                canvas: this.data.canvas,
                canvasId: "2d",
                success(res){
                    console.log("cropComplete = " + res.tempFilePath)
                    that.setData({
                        croppedImageUrl: res.tempFilePath,
                        isCanvasHide: true
                    })


                }
            })

-------------------------- 以下是完整代码 ----------------------------

https://developers.weixin.qq.com/s/13KbgTmL7wGK