0
306
VistasCambiar el color de la imagen dibujada en el lienzo
hola esta es mi foto:
escribo la función para cambiar el color de la imagen seleccionada y la dibujo en el lienzo. en esta función obtengo la posición x, posición, ancho, alto como Estado para dibujar la imagen en el lienzo. pero cuando la primera imagen dibujada en el lienzo y el usuario desea seleccionar otra imagen y dibujarla en otra posición, la imagen anterior (dibujada en el lienzo) se borrará y la segunda imagen se dibujará en el lienzo. mi función es:
function takePicture(event) { // get image src setImgSRC(event.target.src); } function DrawPicture() { setCountClick(CountClick + 1); var Se_image = new Image(); Se_image.src = ImgSRC; Se_image.onload = function () { if (CountClick === 2) {// I want to execute this condition by double clicking ctxRef.current.drawImage(Se_image, POx1, POY1, widthSize, heightSize);// I have already received these four states ctxRef.current.globalCompositeOperation = "source-in";//**** ctxRef.current.fillStyle = "#09f"; ctxRef.current.fillRect( POx1, POY1, widthSize, heightSize); ctxRef.current.globalCompositeOperation = "source-over"; setCountClick(1); } } }si cambio (source-in) a (source-over). (En la línea que marqué con el comentario *). cuando se ejecuta la función, siempre me da un rect azul. y mi dibujo anterior permanece. y ahora puedo hacerle mi pregunta de otra manera: ¿cómo puedo cambiar el color de la imagen en el lienzo en source-over Mood? o ¿cómo puedo cambiar el color de la imagen en el lienzo en la fuente en Mood? Sin perder datos en el lienzo
es el resultado de la fuente en Mood y quiero cambiar de color de esta manera:
y este es mi resultado Mood de origen:
1 Respuestas
Responde la pregunta0
No creo que obtenga la respuesta de la forma en que eligió usar DataImg y creo que esta es su solución:
// get the canvas object var canvas = canvasRef.current var ctx = canvas.getContext('2d'); //get the 2d context var img = Se_image // get the test image ctx.drawImage(img, POx1, POY1, widthSize, heightSize); // get the pixel data var imageData = ctx.getImageData(POx1, POY1, widthSize, heightSize); var data = imageData.data; // we manipulate the pixel data here in order to make the image lighter console.log(lineColor); const r = parseInt(lineColor.substr(1,2), 16) const g = parseInt(lineColor.substr(3,2), 16) const b = parseInt(lineColor.substr(5,2), 16) var changeColor = function () { for (var i = 0; i < data.length; i += 4) { // we are jumping every 4 values of RGBA for every pixel data[i] = r // the red color channel data[i + 1] = g // the green color channel data[i + 2] = b // the blue color channel } ctx.putImageData(imageData, POx1, POY1); }; changeColor();