Question

我正在使用OpenCV.js向左和向右旋转图像，但是在旋转时它被裁剪了。这是我的代码：

    let src = cv.imread('img');
    let dst = new cv.Mat();
    let dsize = new cv.Size(src.rows, src.cols);
    let center = new cv.Point(src.cols/2, src.rows/2);
    let M = cv.getRotationMatrix2D(center, 90, 1);
    cv.warpAffine(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
    cv.imshow('canvasOutput', dst);
    src.delete(); dst.delete(); M.delete();

这里是一个例子：

这是我的原始图片：

这就是我想要的：

但是它返回的是这样的：

我该怎么做才能解决此问题？

P / s：除javascript外，我不知道如何使用其他语言。

Answer 1

我也遇到了这个问题，因此请查看@ fernando-garcia的答案，但是我看不到rotate已在opencv.js中实现，因此看来@dan中的修复程序-mašek的链接是对此的最佳解决方案，但是所需的功能略有不同。

这是我想出的解决方案（请注意，我尚未测试此确切的代码，可能有一种更为优雅/有效的方式编写此代码，但它给出了大致的想法。这也仅适用于图像旋转90°的倍数）：

const canvas = document.getElementById('canvas');
const image = cv.imread(canvas);
let output = new cv.Mat();
const size = new cv.Size();

size.width = image.cols;
size.height = image.rows;

// To add transparent borders
const scalar = new cv.Scalar(0, 0, 0, 0);

let center;
let padding;

if (height > width) {
    center = new cv.Point(height / 2, height / 2);
    padding = (height - width) / 2;
    // Pad out the left and right before rotating to make the width the same as the height
    cv.copyMakeBorder(image, output, 0, 0, padding, padding, cv.BORDER_CONSTANT, scalar);
    size.width = height;
} else {
    center = new cv.Point(width / 2, width / 2);
    padding = (width - height) / 2;
    // Pad out the top and bottom before rotating to make the height the same as the width
    cv.copyMakeBorder(image, output, padding, padding, 0, 0, cv.BORDER_CONSTANT, scalar);
    size.height = width;
}

// Do the rotation
const rotationMatrix = cv.getRotationMatrix2d(center, 90, 1);

cv.warpAffine(
    output,
    output,
    rotationMatrix,
    size,
    cv.INTER_LINEAR,
    cv.BORDER_CONSTANT,
    new cv.Scalar()
);

let rectangle;

if (height > width) {
    rectangle = new cv.Rect(0, padding, height, width);
} else {
    /* These arguments might not be in the right order as my solution only needed height 
     * > width so I've just assumed this is the order they'll need to be for width >= 
     * height.
     */
    rectangle = new cv.Rect(padding, 0, height, width);
}

// Crop the image back to its original dimensions
output = output.roi(rectangle);

cv.imshow(canvas, output);

Answer 2

有点晚了，但是鉴于opencv.js资料的稀缺性，我将发布答案：

函数cv.warpAffine会裁剪图像，因为它仅执行OpenCV和其他来源中记录的数学转换，如果您希望旋转到任何角度，则需要计算填充以补偿该图像。 / p>

如果只希望旋转90度，则可以按以下方式使用cv.rotate：

cv.rotate(src, dst, cv.ROTATE_90_CLOCKWISE);

其中src是带有源图像的矩阵，dst是可以如下定义为空的目标矩阵，let dst = new cv.Mat();和cv.ROTATE_90_CLOCKWISE是表示旋转角度的旋转标志，有三种不同的形式选项：

cv.ROTATE_90_CLOCKWISE
cv.ROTATE_180
cv.ROTATE_90_COUNTERCLOCKWISE

您可以在存储库的opencv_js.congif.py file上找到在OpenCV.js上实现了哪些OpenCV函数，如果该函数被标记为白名单，则说明该函数正在opencv.js上运行，即使它不包含在opencv.js教程。

有关如何使用每个函数的信息可在常规文档中找到，参数的顺序通常在C ++指示符上指明（不要被oscure C ++向量类型sintax分散注意力）和名称标记（如rotate标记）通常在python指示上显示。

在OpenCV.js中旋转时自动裁剪图像

2 个答案: