Exported image with custom background isn't working as expected

[aungphyooo182]

Describe the bug
When using custom background in canvas, exported image is blurred in area of custom background image and included something like extra svg.

To Reproduce
Sandbox link to see bug

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
I want drawed strokes and custom image in one frame.

Screenshots

Desktop (please complete the following information):

• OS: [macOS 10.15.7]
• Browser [chrome]
• Version [Version 123.0.6312.107 (Official Build) (x86_64)]

[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}
          />