1
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

componentWillUnmount() {

    this.props.words.forEach(w =>
  w.letters.forEach(l => {
    const existing = this.imageCache.get(l.letterId);
    if (existing) return;
    const image = new Image();
    // image.crossOrigin = "Anonymous";

    image.src = this.props.letters.find(
      ll => ll.id === l.letterId
    ).imgThumbnailUrl;

    image.onload = () => {
      this.handleLetterFetched(l.letterId);
    };
    // localStorage.setItem( "chosenLetterImages", image );

    this.imageCache.set(l.letterId, { image, fetched: false });
  })
);
};

componenDidUpdate() {
this.canvases.forEach((canvas, wordIndex) => {
  const letterImages = this.props.words[wordIndex].letters.map(
    l => this.imageCache.get(l.letterId).image
  );
  const ctx = canvas.getContext("2d");
    letterImages.forEach((image, index) => {
      ctx.drawImage(
        image,
        -imageWidth / 2,
        -imageHeight,
        imageWidth,
        imageHeight
      );
    // let data = canvas.toDataURL("image/png");

    // this.props.framingNonFrameCanvasInPng(data);

}

whenever I run

        let data = canvas.toDataURL("image/png");

I get error on the top. When I use img.crossOrigin = 'Anonymous'; One error goes away but the other error comes up

image access from firebase database has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I'm just tryig to convert canvas to png image so I can share it on facebook on my react application.

Help much appreciated!

1

0