HTML5 Canvas putImageData не работает должным образом

Question

Я использую html5 canvas для некоторых манипуляций с изображениями. Я хочу ввести функциональность, чтобы изменить цвет фона холста. Поэтому я позволяю пользователю выбрать пиксель, откуда начать менять цвет фона и предоставить мне новый цвет. Затем я итеративно перемещаюсь по окружающим пикселям для изменения цвета. Однако кажется, что context.putImageData не меняет цвет. Код выглядит, как показано ниже:

//c represents the pixel where we want to start changing color 
function Fill(c){ 
    var oldColor = context.getImageData(c.x1,c.y1,1,1); 
    var NewColor = {}; 
    NewColor.red = 33; 
    NewColor.green = 0; 
    NewColor.blue = 0; 
    bucketFill(c.x1,c.y1,oldColor.data,NewColor); 
} 

function getColor(x,y){ 
    var tempData = context.getImageData(x,y,1,1); 
    var colorString = JSON.stringify(tempData.data); 
    return colorString; 
    } 

    function setColor(x,y,NewColor){ 
    var tempData = context.getImageData(x,y,1,1); 
    tempData.data[0] = NewColor.red; 
    tempData.data[1] = NewColor.green; 
    tempData.data[2] = NewColor.blue; 
    context.putImageData(tempData,1,1); 
    } 

    function bucketFill(x,y,oldColor,NewColor){ 
    if((x<0) || (x>canvas.width) || (y<0) || (y>canvas.height)){ 
     return; 
    } 
    if(getColor(x,y) != JSON.stringify(oldColor)) {return;} 

    setColor(x,y,NewColor); 
    bucketFill(x-1,y-1,oldColor,NewColor); 
    bucketFill(x-1,y,oldColor,NewColor); 
    bucketFill(x-1,y+1,oldColor,NewColor); 
    bucketFill(x,y-1,oldColor,NewColor); 
    bucketFill(x,y+1,oldColor,NewColor); 
    bucketFill(x+1,y-1,oldColor,NewColor); 
    bucketFill(x+1,y,oldColor,NewColor); 
    bucketFill(x+1,y+1,oldColor,NewColor); 
    } 

Так что вопрос здесь в том, что функция SetColor не устанавливает новый цвет фона

Answer 1

Вы должны putImageData туда, где вы его нашли.

putImageData имеет эти параметры (imageDataObject, x-координата, y-координата).

context.putImageData(tempData,x,y); // not putImageData(tempData,1,1) 

Просто мысли ...

Вы не устанавливая альфа-компонент пикселя (tempData.data [3]). Это означает, что если пиксель был прозрачным (данные [3] === 0), то замененный цвет не будет отображаться (он также прозрачен). Я предполагаю, что это то, чего вы желаете, но я все равно упомянул об этом.

Кроме того, поскольку getImageData/putImageData являются довольно дорогостоящими операциями, чаще всего выполняются все модификации массива пикселей, прежде чем делать putImageData.

• getImageData (0,0, canvas.width, canvas.height) // получить все пиксели

• изменить все пиксельные данные по желанию // изменить все пиксели по желанию

• putImageData (TempData, 0,0); // помещаем все измененные пиксели на холст в 1 нажим

JSON - довольно дорогой способ сравнения данных. Вместо этого вы можете использовать javascript-объекты.

Без достаточного количества кофе я не уверен, но похоже, что ваш гиперрекурсивный bucketFill может вызвать бесконечные циклы в некоторых случаях. Вот хороший альтернативный пример заливки Уильямом Мэлоуном: http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/