Javascript如何加快此功能

时间:2019-06-26 09:51:56

标签: javascript canvas crop

我的代码中有一个函数可以检测画布中的边缘,但这是我的代码中最慢的一部分,在所有地方都使用。如果我可以优化它,那么我的整个程序将大大加快速度。

也许Em6可以做得更好?

基本上,该函数从左侧开始,直到找到大于(或小于)传递给该函数的颜色值的像素颜色。然后,它获取所有值的最大值或最小值,该值是图像内部任何内容的边缘。

然后对顶部进行相同的操作,在底部右侧进行查找所有边缘。对于在画布中裁剪某些内容很有用。

function getEdges(tempcanv, colour, which, condition) {
    let ledge = [], redge = [], tedge = [], bedge = [];
    const canvwidth = tempcanv.width, canvheight = tempcanv.height;
    const contextd = tempcanv.getContext('2d');
    for (let y = 0; y < canvheight; y++) {//left edge
        for (let x = 0; x < canvwidth; x++) {
            const data = contextd.getImageData(x, y, 1, 1).data;
            if (condition(data[which], colour)) {
                ledge.push(x);
                break;
            }
        }
    }
    ledge = Math.min(...ledge);
    const llim = ledge === 0 ? ledge : ledge - 1;
    for (let x = llim; x < canvwidth; x++) {//top edge
        for (let y = 0; y < canvheight; y++) {
            const data = contextd.getImageData(x, y, 1, 1).data;
            if (condition(data[which], colour)) {
                tedge.push(y);
                break;
            }
        }
    }
    tedge = Math.min(...tedge);
    const tlim = tedge === 0 ? tedge : tedge - 1;
    for (let y = tlim; y < canvheight; y++) {//right edge
        for (let x = canvwidth - 1; x >= ledge; x--) {
            const data = contextd.getImageData(x, y, 1, 1).data;
            if (condition(data[which], colour)) {
                redge.push(x);
                break;
            }
        }
    }
    redge = Math.max(...redge);
    for (let x = llim; x <= redge; x++) {//bottom edge
        for (let y = canvheight - 1; y >= tedge; y--) {
            const data = contextd.getImageData(x, y, 1, 1).data;
            if (condition(data[which], colour)) {
                bedge.push(y);
                break;
            }
        }
    }
    return [ledge, tedge, redge + 1, Math.max(...bedge) + 1]
}

//(canvas passed, colour threshold, R,G or B, greater or less than)
getEdges(canvas, 180, 0, (a, b) => a > b))

我的代码确实做了 some 优化,因为找到边缘后,下一次边缘检查不会检查已检查的死区。

0 个答案:

没有答案