konvajs / react-konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
https://konvajs.github.io/docs/react/
MIT License
5.78k stars 256 forks source link

Still get Tainted Canvas error when use data url for image shape. #516

Closed ivanzhu-sh closed 4 years ago

ivanzhu-sh commented 4 years ago

Hi In my requirement , I need export stage as image base but there is one shape with different images , So I should update shape image attr when export .

I made one demo here : https://jsbin.com/xanubus/edit?html,js,output It's works.

But in my project I use react konva. here is some demo codes (the image src now is static). Could you help me how to do it Or something else ?

          Object.keys(this.sentiments).forEach((key: string) => {
            const sentiment: sentiment[] = this.sentiments[key];
            let id = '#' + key;
            let shape = this.stage.findOne(id);
            sentiment.forEach((item) => {
              const id = item.id;
              const name = item.name;
              const img = item.img;
              const thumb = item.thumb;
              let image = new Image();
              image.src = "data:image/png;base64,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";

              image.onload = () => {
                shape.setAttr('image', image);
                //this.stage.batchDraw();

                let dataUrl = this.stage.toDataURL({
                  x: this.settings.safe_area.x,
                  y: this.settings.safe_area.y,
                  width: this.settings.safe_area.width,
                  height: this.settings.safe_area.height,
                  quality: 1,
                  pixelRatio: 500 / this.settings.safe_area.width,
                  mimeType: "image/png",
                });

                console.log('dataUrl', dataUrl);
              }
            })
lavrton commented 4 years ago

Could you help me how to do it Or something else ?

Help to do what?

lavrton commented 4 years ago

I have only this doc link to you: https://konvajs.org/docs/posts/Tainted_Canvas.html#page-title