Estoy tratando de usar un lienzo para dibujar una imagen con un filtro de color sobre ella. Como css tiene el filtro de cambio de tono, lo estoy usando para aplicarlo en el lienzo. El problema es que tengo una paleta y quiero cambiar el color a través del color que el usuario presiona en la paleta. Ya obtuve el valor RGBA al hacer clic en la paleta; simplemente no estoy seguro de cómo usar esto para crear un filtro de color para la imagen en sí.
function changeColor2(e) { x2 = e.offsetX; y2 = e.offsetY; var imageData2 = firstContext2.getImageData(x2, y2, 1, 1).data; rgbaColor2 = 'rgba(' + imageData2[0] + ',' + imageData2[1] + ',' + imageData2[2] + ',1)'; colorLabel2.style.backgroundColor = rgbaColor2; console.log(rgbaColor2); context.filter= 'grayscale(100%)' + 'sepia(100%)'; //context.strokeStyle = 'rgba(' + imageData[0] + ',' + imageData[1] + ',' + imageData[2] + ',1)'; }¿A dónde iría desde aquí para obtener el cambio de color?
Tal vez el modo de fusión "hue" sea suficiente para ti:
globalCompositeOperation del contexto en "hue" . const inp = document.querySelector("input"); const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const img = new Image(); img.src = "https://picsum.photos/300/300"; img.decode().then(() => { canvas.width = img.width; canvas.height = img.height; inp.oninput = e => { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "hue"; ctx.fillStyle = inp.value; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = "source-over"; }; inp.oninput(); }); <input type=color value=#cca633><br> <canvas></canvas>