javascript - 在javascript中定向后 Canvas 将图像裁剪为正方形

Question

我使用此函数来定位、调整大小和压缩用户提交的图像。如果是手机拍摄的照片是矩形的。我需要从原始图像中得到一张方形图像，在旋转后裁剪它。怎么做？

function resetOrientationResizeCompress(srcBase64, srcOrientation) {

    return new Promise(function (resolve) {

        var img = new Image();

        img.onload = function () {
            var width = img.width,
                height = img.height,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d");

            var MAX_WIDTH = 1000;
            var MAX_HEIGHT = 1000;

            // set proper canvas dimensions before transform & export
            if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = height;
                canvas.height = width;
            } else {
                if (height > MAX_HEIGHT) {
                    width *= MAX_HEIGHT / height;
                    height = MAX_HEIGHT;
                }
                canvas.width = width;
                canvas.height = height;
            }

            // transform context before drawing image
            switch (srcOrientation) {
                case 2:
                    ctx.transform(-1, 0, 0, 1, width, 0);
                    break;
                case 3:
                    ctx.transform(-1, 0, 0, -1, width, height);
                    break;
                case 4:
                    ctx.transform(1, 0, 0, -1, 0, height);
                    break;
                case 5:
                    ctx.transform(0, 1, 1, 0, 0, 0);
                    break;
                case 6:
                    ctx.transform(0, 1, -1, 0, height, 0);
                    break;
                case 7:
                    ctx.transform(0, -1, -1, 0, height, width);
                    break;
                case 8:
                    ctx.transform(0, -1, 1, 0, 0, width);
                    break;
                default:
                    ctx.transform(1, 0, 0, 1, 0, 0);
            }

            // draw image
            ctx.drawImage(img, 0, 0, width, height);

            // export base64
            resolve(canvas.toDataURL("image/jpeg", 0.6));
        };

        img.src = srcBase64;

    })

}

我能够修改该函数，以便在定向后图像被裁剪为正方形。我尝试使用方向为 1 和 6 的图像。对于更多情况，我是否会在这里遗漏一些内容？代码如下:

function resetOrientationResizeCompress(srcBase64, srcOrientation) {

    return new Promise(function (resolve) {

        var img = new Image();

        img.onload = function () {
            var width = img.width,
                height = img.height,
                canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                start_Y,
                start_X;

            var MAX_WIDTH = 1000;
            var MAX_HEIGHT = 1000;

            //srcOrientation is defined
            if(srcOrientation){

                // set proper canvas dimensions before transform & export
                if ([5, 6, 7, 8].indexOf(srcOrientation) > -1) {
                    if (width > height) {
                        if (width > MAX_WIDTH) {
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                        }
                    } else {
                        if (height > MAX_HEIGHT) {
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT;
                        }
                    }
                    canvas.width = height;
                    canvas.height = width;
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                    canvas.width = width;
                    canvas.height = height;
                }

            }
            //srcOrientation undefined
            else{

                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = height;
                canvas.height = width;


            }


            //crop image for different cases (vertical, horizontal, square image)
            if(canvas.width < canvas.height){

                console.log('vertical');

                start_Y = (canvas.height - canvas.width)/2;

                start_X = 0;

                canvas.height = canvas.width;

            }
            else if(canvas.width > canvas.height){

                console.log('horizontal');

                start_Y = (canvas.width - canvas.height)/2;

                start_X = 0;

                canvas.width = canvas.height;

            }
            else if(canvas.width == canvas.height){

                console.log('square');

                start_Y = 0;

                start_X = 0;
            }

            // orientate image if orientation is defined
            if(srcOrientation){

                // transform context before drawing image
                switch (srcOrientation) {
                    case 2:
                        ctx.transform(-1, 0, 0, 1, width, 0);
                        break;
                    case 3:
                        ctx.transform(-1, 0, 0, -1, width, height);
                        break;
                    case 4:
                        ctx.transform(1, 0, 0, -1, 0, height);
                        break;
                    case 5:
                        ctx.transform(0, 1, 1, 0, 0, 0);
                        break;
                    case 6:
                        ctx.transform(0, 1, -1, 0, height, 0);
                        break;
                    case 7:
                        ctx.transform(0, -1, -1, 0, height, width);
                        break;
                    case 8:
                        ctx.transform(0, -1, 1, 0, 0, width);
                        break;
                    default:
                        ctx.transform(1, 0, 0, 1, 0, 0);
                }

            }

            // draw image
            ctx.drawImage(img, -start_Y, start_X, width, height);

            // export base64
            resolve(canvas.toDataURL("image/jpeg", 0.6));
        };

        img.src = srcBase64;

    })

}

Answer 1

绝对最简单的解决方案，如果您不关心实际编辑图像并且知道确切的裁剪尺寸，则只需从负坐标开始绘制图片，以便图像的左侧或顶部脱离 Canvas 。或者，您可以使 Canvas 足够小，以便在 x=y=0 处绘制时，右半部分或下半部分被切除。无论哪种情况，都是将 Canvas 调整为您想要的图片大小，并对其进行定位，以便剪切掉您不需要的区域。

或者，还有一些令人惊叹的库，例如cropper.js，可以为用户提供很大的裁剪自由。我知道使用cropper.js，您可以将裁剪限制为一个正方形，并让用户将该正方形拖动到他们想要裁剪的位置