Как захватить изображение с fabri c. js canvas как base64?

Question

Я работал над редактором изображений, который имеет некоторые функции редактирования. Для размещения стикеров на изображении я использую fabric.js canvas. Размещение наклеек на изображении работает нормально, но когда я сохраняю изображение холста как base64, вместо этого я получаю черный фон с наклейками на нем, а я хочу выбрать выбранное изображение, на котором есть наклейки, как изображение base64.

Добавить наклейки. js

import React from "react";
import { Modal, ModalFooter } from "reactstrap";
import { fabric } from "fabric";
import "fabric-customise-controls";
import htmlToImage from "html-to-image";

import ButtonC from "../common/Button";

export default class AddStickers extends React.Component {
    state = {
        stickers: [],
        img: null,
    };

    componentDidMount() {
        this.makeCanvas();
        this.fetchStickers();
    }

    makeCanvas = () => {
        // Make a New Canvas
        this.__canvas = new fabric.Canvas("imgCanvas", {
            preserveObjectStacking: true,
            useCors: true,
            origin: "anonymous",
            allowTaint: true,
        });

        this.__canvas.on({
            "object:selected": this.onSelectTextElement,
        });
        this.setState({ img: this.props.image });
    };

    fetchStickers = () => {
        fetch(
            "https://api.mojilala.com/v1/stickers/trending?api_key=dc6zaTOxFJmzC",
            {
                method: "GET",
            }
        )
            .then((response) => response.json())
            .then((res) => {
                if (res.data.length) {
                    this.setState({
                        stickers: res.data.map(
                            (d) => d.images.fixed_width_small_still.url
                        ),
                    });
                }
            })
            .catch((error) => {
                console.error("Error:", error);
            });
    };

    addNewImageElement(e) {
        fabric.util.loadImage(e, (img) => {
            const legimg = new fabric.Image(img, {
                left: 0,
                top: 0,
                crossOrigin: true,
                lockUniScaling: true,
            });

            legimg.customiseCornerIcons({
                mtr: {
                    icon:
                        "https://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_rotate-512.png",
                },
            });
            legimg.scaleToWidth(30);
            legimg.scaleToHeight(30);

            this.__canvas.add(legimg);
            this.__canvas.bringToFront(legimg);
            this.__canvas.renderAll();
        });
    }

    cancelHandler = () => {
        this.__canvas.clear();
        this.__canvas.dispose();
        this.__canvas = null;
        this.setState({ img: null });
        this.props.handleClose();
    };

    saveHandler = () => {
        const imageUrl = this.__canvas.toDataURL();
        console.log(imageUrl);
    };

    render() {
        const { stickers } = this.state;
        const { isOpen } = this.props;

        return (
            <div
                id="myModal"
                className={`stickers-modal`}
                style={{ display: isOpen ? "block" : "none" }}
            >
                <div className="stickers-modal-content">
                    <div className={"d-flex"} style={{ height: "80vh" }}>
                        <div
                            className={
                                "w-25 p-1 d-flex flex-wrap stickers-options"
                            }
                            style={{ height: "100%", overflow: "scroll" }}
                        >
                            {stickers.length ? (
                                stickers.map((sticker) => (
                                    <img
                                        key={sticker}
                                        style={{ cursor: "pointer" }}
                                        width={60}
                                        height={60}
                                        className={"mr-2 mb-4"}
                                        src={require("../../assets/images/1.png")}
                                        alt={"Sticker"}
                                        crossOrigin={"Anonymous"}
                                        onClick={() =>
                                            this.addNewImageElement(
                                                require("../../assets/images/1.png")
                                            )
                                        }
                                    />
                                ))
                            ) : (
                                <label>Loading...</label>
                            )}
                        </div>
                        <div className={"w-75 h-100"}>
                            <div id="canvas-wrap">
                                <canvas
                                    className="canvas"
                                    id="imgCanvas"
                                    style={{
                                        zIndex: 99,
                                    }}
                                    onClick={(e) => console.log(e)}
                                />
                                <div id="overlay">
                                    <img
                                        id={"canv-image"}
                                        src={this.state.img}
                                        alt=""
                                        style={{
                                            backgroundImage: this.state.img,
                                            zIndex: 0,
                                            width: "100%",
                                            height: "100%",
                                            objectFit: "contain",
                                        }}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <ModalFooter>
                        <ButtonC
                            color={"secondary"}
                            onClick={this.cancelHandler}
                        >
                            Cancel
                        </ButtonC>
                        <ButtonC onClick={this.saveHandler}>Save</ButtonC>
                    </ModalFooter>
                </div>
            </div>
        );
    }
}