HTML5 canvas: отсечение по цвету - PullRequest
Новая
       23

HTML5 canvas: отсечение по цвету

2 голосов
/ 08 сентября 2011

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

1 Ответ

4 голосов
/ 08 сентября 2011

Демо-версия

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

// Takes an array with 3 color components, rgb     
function removeColor(color){
    var canvasData = ctx.getImageData(0, 0, 256, 256),
        pix = canvasData.data;

    for (var i = 0, n = pix.length; i <n; i += 4) {
        if(pix[i] === color[0] && pix[i+1] === color[1] && pix[i+2] === color[2]){
             pix[i+3] = 0;   
        }
    }

    ctx.putImageData(canvasData, 0, 0);
}

removeColor([0,0,255]); // Removes blue.

И, как указал Саймон, приведенный выше код получит точный цвет. Ниже приведен приблизительный цвет, что хорошо, если цвета совпадают или очень близки друг к другу.

Демонстрация 2 с приближением

...