canvas.toDataURL() returns image with width 4 times and height 2 times bigger

Hello. Thank you for this awesome package.

I’m testing getting image data from canvas and i found that image size returned after canvas.toDataURL() call is 4 times in width and 2 times in height bigger than canvas width and height. Could you point me what i’m doing wrong please or tell me if it’s a bug. My code looks the following way:

handleCanvas(canvas) {
       this.canvas = canvas;
        canvas.width = 200;
        canvas.height = 300;
        const context = canvas.getContext('2d');
        const image = new CanvasImage(canvas);
            image.addEventListener('load', () => {
                    context.drawImage(
                        image,
                        0,
                        0
                    );
            });
            image.src = `data:image/jpeg;base64,${this.imageData}`;
        });
    }

...

this.canvas.toDataURL('image/jpeg')
     .then((data) => {
          // By the way here data is wrapped in quotes by some reason, so we need to remove them
          data = data.substring(1);
          data = data.slice(0, -1);

          if (data.indexOf('data:image/jpeg;base64,') > -1) {
               // Removing "data:image/jpeg;base64," for saving into file as base64 data
                data = data.substring(23);
          }
          RNFetchBlob.fs.writeFile(this.path, data, 'base64')
               .then(() => {
                    // Image data saved and has 200x4 pixels width and 300x2 pixels height
               })
     }

For saving image react-native-fetch-blob package is used

Thanks in advance

[ghost]

Ok, i researched the sources and found reason. The problem is that autoScale function is called twice - one time when we set width for canvas and second time when we set height. I fixed locally by removing this.autoScale() call from width and height setters and made this function public by adding it in Canvas.js:

(0, _webviewBinders.webviewMethods)(['toDataURL', 'autoScale'])

Then i set width and height of canvas in the following way:

this.canvas.width = 600;
this.canvas.height = 800;
this.canvas.autoScale();

[iddan]

Please open a new issue.