I am working on a reactjs project and I am trying to capture the HTML for creating images including the canvas of signature. It's working on firefox and chrome but not safari. Image is generated with the empty canvas.
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)
}
})
}
}
I've resolved this problem just with a double execution of the html-to-image function, so in your case it could be like this:
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)
}
})
})
}
}