Estoy trabajando en un proyecto de reactjs y estoy tratando de capturar el HTML para crear imágenes, incluido el lienzo de la firma. Funciona en Firefox y Chrome, pero no en Safari. La imagen se genera con el lienzo vacío.
this.setState({ formInput: document.getElementById("form-pdf") }) generateImage(data) { const input = this.state.formInput; let apiService = new ApiServices(); if (input) { await htmlToImage.toBlob(input) .then((blob) => { console.log(blob,'blob') let file = new File([blob], "image.png", { type: "image/png" }) if (data) { let body = new FormData(); apiService.http.post(this.getAPINames().Upload, body, { headers: { 'Accept': 'application/json', 'Content-Type': 'multipart/form-data', }, timeout: 100000, }).then(response => { console.log("Success") }).catch(failure => { hideLoader(); if (isDev) { console.log("on upload image error:", failure) } }); } }) .catch((error) => { if (isDev) { console.log(error) } }) } }Resolví este problema simplemente con una doble ejecución de la función html-to-image, por lo que en tu caso podría ser así:
generateImage(data) { const input = this.state.formInput; let apiService = new ApiServices(); if (input) { await htmlToImage.toBlob(input) .then(function(){ await htmlToImage.toBlob(input) .then((blob) => { console.log(blob,'blob') let file = new File([blob], "image.png", { type: "image/png" }) if (data) { let body = new FormData(); apiService.http.post(this.getAPINames().Upload, body, { headers: { 'Accept': 'application/json', 'Content-Type': 'multipart/form-data', }, timeout: 100000, }).then(response => { console.log("Success") }).catch(failure => { hideLoader(); if (isDev) { console.log("on upload image error:", failure) } }); } }) .catch((error) => { if (isDev) { console.log(error) } }) }) } }