0

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;

1 respuesta 1

0

no encontré una solución, pero lo que hice fue remplazar el input type file por un tipo text, y le agregue un value al input "imagenURL" y lo que hace es cuando creo el lienzo con el canvas el código de la imagen se copia en dicho input, y al enviarlo con mi formulario al backend recibo el codigo64 de la imagen y desde ahi puedo convertir el código a una imagen en .png ya sea con php etc.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.