Exported image with custom background isn't working as expected

[aungphyooo182]

Exported image with custom background isn't working as expected

[davidklpk]

Had the same issue. Instead using an external image directly, I had to export my image as data URI. Maybe it works for your case too.

Here is an example:

const [base64String, setBase64String] = useState<string>("");

try {
      const response = await fetch("yourImageUrl");
      const blob = await response.blob();
      const reader = new FileReader();

      reader.onload = () => {
        const base64data = reader.result as string;
        setBase64String(base64data);
      };

      reader.readAsDataURL(blob);
    } catch (e) {  }

   <ReactSketchCanvas
            ref={canvasRef}
            preserveBackgroundImageAspectRatio={"xMidYMid"}
            exportWithBackgroundImage={true}
            backgroundImage={base64String}
          />