title: react image crop output to base64 is not working
body: <p>I am trying to crop the image and then upload to server, but the api server accepts the image as base64 format, it seems not to be working, if there's any work around? much appreciated!!! and im getting the image as blob, i dont know how to convert it to base64.</p>
  <p>This is the output i am getting from the image tag</p>
  <pre><code>src=&quot;blob:http://localhost:3000/c61ee692-8697-43c3-b9c0-5077322940eb&quot;
  
  </code></pre>
  <p>Please take a look at the code below</p>
  <pre><code>
   getCroppedImg(image, crop, fileName) {
          const canvas = document.createElement('canvas');
          const scaleX = image.naturalWidth / image.width;
          const scaleY = image.naturalHeight / image.height;
          canvas.width = crop.width;
          canvas.height = crop.height;
          const ctx = canvas.getContext('2d');
          ctx.imageSmoothingQuality = 'high';
          ctx.drawImage(
              image,
              crop.x * scaleX,
              crop.y * scaleY,
              crop.width * scaleX,
              crop.height * scaleY,
              0,
              0,
              crop.width,
              crop.height
          );
          // As Base64 string
          const base64Image = canvas.toDataURL('image/jpeg');
  
          return new Promise((resolve, reject) =&gt; {
              canvas.toBlob(blob =&gt; {
                  if (!blob) {
                      console.error('Canvas is empty');
                      return;
                  }
                  blob.name = fileName;
                  window.URL.revokeObjectURL(this.fileUrl);
                  this.fileUrl = window.URL.createObjectURL(blob);
                  resolve(this.fileUrl);
              }, 'image/jpeg');
          });
      }
  
  </code></pre>