buen dia, tengo un canvas que me permite dibujar y me guarda lo que dibujo en un img pero necesito que también me guarde esa imagen en un input type file para poderla guardar posteriormente en un form, he intentado agregar un onchange al input type file para que reciba la imagen al momento que se dibuja el canvas pero no consigo capturar el valor, envio mi codigo con lo que he intentado, si alguien me pudiera ayudar se los agradecería.
code: https://codesandbox.io/s/pedantic-sutherland-fidpo3?file=/src/App.js
import React, { useState, useRef } from "react";
import { Link } from "react-router-dom";
import "./styles.css";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";
import SignatureCanvas from "react-signature-canvas";
function Firma() {
const sigCanvas = useRef({});
const limpiar_firma = () => sigCanvas.current.clear();
const [imageURL, setImageURL] = useState(null);
const guardar_firma = () =>
setImageURL(sigCanvas.current.getTrimmedCanvas().toDataURL("image/png"));
const changeHandler_firma = (event) => {
setImageURL(event.target.files[0]);
};
return (
<div class="row">
<div class="col-xl-12">
<div>
<div
class="panel panel-inverse"
data-sortable-id="form-stuff-1"
data-init="true"
>
<div class="panel-heading ui-sortable-handle">
<h4 class="panel-title">CREAR EMPLEADO</h4>
<div class="panel-heading-btn">
<a
href="javascript:;"
class="btn btn-xs btn-icon btn-default"
data-toggle="panel-expand"
title="Expandir"
>
<i class="fa fa-expand"></i>
</a>
</div>
</div>
<div class="panel-body">
{imageURL ? (
<img
src={imageURL}
alt="mi firma"
style={{
display: "block",
margin: " 0 auto",
//border:"1px solid black",
width: "300px"
// Height: "100px"
}}
/>
) : null}
<div class="form-group">
<br />
<label class="form-label" for="customFile">
Sube foto vehiculo
</label>
<input
class="form-control border-0 form-control-clicked"
id="txtFoto"
name="txtFoto"
type="file"
onChange={changeHandler_firma}
/>
</div>
<br />
<br />
<Popup
modal
trigger={<button>Firma aqui</button>}
position="right center"
closeOnDocumentClick={false}
>
{(close) => (
<>
<SignatureCanvas
ref={sigCanvas}
canvasProps={{ className: "sigCanvas" }}
/>
<button onClick={close}>Cerrar</button>
<button onClick={limpiar_firma}>Borrar firma</button>
<button onClick={guardar_firma}>Guardar firma</button>
</>
)}
</Popup>
</div>
</div>
</div>
</div>
</div>
);
}
export default Firma;