在捕获html的图像(包括签名画布)时，有关safari的问题

Question

我正在进行一个reactjs项目，并试图捕获HTML来创建图像，包括签名的画布。它在firefox和chrome上工作，但不使用safari。图像由空画布生成。

反应签名画布

Html到图像

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)
                }
            })
    }
}

Answer 1

我解决了这个问题，只需双执行html到image函数，所以在您的例子中可以这样：

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)
                    }
                })
            })
    }
}