Холст HTML5 вычисляет высоту и ширину из области [дубликат]

Что вам нужно сделать:

• Получить буфер
• Получить 32-битную ссылку на этот буфер (если ваши другие пикселы прозрачны, вы можете использовать Буфер Uint32Array для итерации).
• Сканирование 0 - ширина для поиска x1 edge
• Ширина сканирования - 0 для поиска x2 edge
• Сканирование 0 - высота для нахождения y1 edge
• Высота сканирования - 0, чтобы найти край y2

Эти сканы можно объединить, но для простоты я покажу каждый шаг отдельно.

Онлайн-демонстрация этого может быть найдена здесь.

Результат:

[/g1]

Когда изображение загружено нарисуйте его (если изображение будет небольшим, то остальная часть этого примера будет пустой, поскольку вы будете знать координаты при ее рисовании - предполагая, что изображение, которое вы рисуете, велико с небольшим изображением внутри него)

(примечание: для простоты это не оптимизированная версия)

ctx.drawImage(this, 0, 0, w, h);

var idata = ctx.getImageData(0, 0, w, h),      // get image data for canvas
    buffer = idata.data,                       // get buffer (unnes. step)
    buffer32 = new Uint32Array(buffer.buffer), // get a 32-bit representation
    x, y,                                      // iterators
    x1 = w, y1 = h, x2 = 0, y2 = 0;            // min/max values

Затем сканирование каждого ребра. Для левого края вы просматриваете от 0 до ширины для каждой строки (не оптимизированы):

// get left edge
for(y = 0; y < h; y++) {                       // line by line
    for(x = 0; x < w; x++) {                   // 0 to width
        if (buffer32[x + y * w] > 0) {         // non-transparent pixel?
            if (x < x1) x1 = x;                // if less than current min update
        }
    }
}

Для правого края вы просто переверните x iterator:

// get right edge
for(y = 0; y < h; y++) {                       // line by line
    for(x = w; x >= 0; x--) {                  // from width to 0
        if (buffer32[x + y * w] > 0) {
            if (x > x2) x2 = x;
        }
    }
}

И тот же для верхних и нижних краев только то, что итераторы меняются на противоположные:

// get top edge
for(x = 0; x < w; x++) {
    for(y = 0; y < h; y++) {
        if (buffer32[x + y * w] > 0) {
            if (y < y1) y1 = y;
        }
    }
}

// get bottom edge
for(x = 0; x < w; x++) {
    for(y = h; y >= 0; y--) {
        if (buffer32[x + y * w] > 0) {
            if (y > y2) y2 = y;
        }
    }
}

Полученная область:

ctx.strokeRect(x1, y1, x2-x1, y2-y1);

Существуют различные оптимизации, которые вы можете реализовать, но они полностью зависят в сценарии, например, если вы знаете приблизительное размещение, вам не нужно выполнять итерацию всех строк / столбцов.

Вы могли бы сделать грубую силу, считая его размещение, пропустив x количество пикселей и когда вы нашли непрозрачный пиксель, вы можете создать максимальную область поиска на основе этого и т. д., но это выходит за рамки.

Надеюсь, что это поможет!