.exportImage() not working

[heart6205]

Hi all ,

I just cannot get the Promise functions in ReactSketchCanvas to work!

I am using React 16.5.2 together with react-sketch-canvas 5.3.3 for some backward compatibility reasons.

I have been able to export sketches to .png format previously, but now it doesn't work for some mysterious reason. I even tried the sample code from here:
https://www.npmjs.com/package/react-sketch-canvas/v/5.3.3
and it just doesn't work.

Below is the test code from the above page. I can draw a sketch, but when clicking the button I get the "Button clicked" console message but no data. I am fairly certain that the refCanvas.current is valid through experimentation. Suspect something fundamentally wrong but can't figure it out.

Grateful for any help to find what's wrong!! Have a great day! :)

` import * as React from "react";
import { ReactSketchCanvas } from "react-sketch-canvas";

  export default class SignDialog extends React.Component{
      constructor(props, context) {
          super(props, context);
  
          this.refCanvas = React.createRef();
      }

  render() {
      const canvasStyles = {
          position:'fixed',
          top: '200px',
          left: '10%',
          width: '80%',
          border: '1px solid grey',
          borderRadius: '10px',
      };

      return (
          <div style={canvasStyles}>
              <ReactSketchCanvas
                  ref={this.refCanvas}
                  strokeWidth={5}
                  strokeColor="red"
                  style={{ border:"1px solid lime" }}
                  canvasColor="grey"
              />
              <button
                  onClick={() => {
                      console.log("Button clicked.");
                      this.refCanvas.current
                          .exportImage("png")
                          .then(data => {
                              console.log(data);
                          })
                          .catch(e => {
                              console.log(e);
                          });
                  }}
                  >
                  Get Image
              </button>
          </div>
      );
  }

}
`

Here's my package.json (minus the header fields for secrecy):

{ "devDependencies": { "@types/backbone": "^1.4.1", "@types/jquery": "2.0.52", "@types/lodash": "4.14.165", "@types/node": "^7.10.9", "@types/react": "16.4.16", "@types/react-dom": "16.0.11", "@wasm-tool/wasm-pack-plugin": "0.2.3", "awesome-typescript-loader": "5.2.1", "babel-core": "6.26.3", "babel-loader": "~7", "babel-preset-env": "^1.7.0", "babel-preset-react": "6.24.1", "backbone": "1.1.2", "base64-inline-loader": "2.0.1", "css-loader": "1.0.0", "d3": "3.5.5", "file-loader": "^6.2.0", "immer": "^9.0.12", "jquery": "2.1.4", "lodash": "^4.17.21", "moment": "^2.29.3", "node-sass": "4.14.1", "pepjs": "^0.5.3", "react": "16.5.2", "react-datepicker": "1.6.0", "react-dom": "16.5.2", "react-fastclick": "3.0.2", "react-sketch-canvas": "5.3.3", "reconnectingwebsocket": "~1.0.0", "sass-loader": "7.1.0", "source-map-loader": "0.2.4", "spark-md5": "~3.0.0", "style-loader": "0.23.1", "typescript": "^3.7.2", "uglifyjs-webpack-plugin": "2.0.1", "webpack": "4.29.5", "webpack-cli": "3.2.3", "webpack-notifier": "^1.15.0" }, "dependencies": { "geodesy": "^2.2.0" } }

[vinothpandian]

Hi @heart6205,

Your code looks correct and it seems to work. You can check it here https://codesandbox.io/s/export-image-example-dzk850

[heart6205]

Hi Vinoth,

Thanks for the quick reply! :)

Yes, the code indeed works in the sandbox above, but not in my React project.
Could it be a scope issue? Or could it be related to not having an image background as in this issue?
#46

I'm using RSC 5.3.3. Which React version is required by RSC 6.0.2?

[vinothpandian]

I switched to hooks from that version so it will only support react >= 16.7

[vinothpandian]

If you want a quick solution, you can try something like https://github.com/niklasvh/html2canvas and capture the ReactSketchCanvas node