0

Hi dev!

I'm on a project, where I need to let the user crop and upload images.

To do the cropping part, I use react-cropper.

My issue is that on chrome, the dataURL limit is 65529 pixels.

If I try to use canvas.getDataURL() on more than 65529 px, it results on a transparent image.

On the client, it's not a problem, since I can display a preview with a reduced size.

To send the fullSize cropped image on the server, I use canvas.toBlob(). But even there, I get a transparent image...

How can I send a High Quality canvas ( max 1920x1080 ) as an image to the server ?

Thanks to the ones who will take the time to answer me ! :)

Elies Lou
  • 351
  • 2
  • 5
  • Possible duplicate of [canvas.toDataURL() for large canvas](https://stackoverflow.com/questions/16156402/canvas-todataurl-for-large-canvas) – Vasyl Moskalov Feb 12 '18 at 10:05
  • I don't think so... My canvas will never exceed the size of 2000x2000.... And I am not trying to convert to DataURL, which seems to be limited to 250x250px on chrome, but in **blob**, so I can send decent quality images to the server... – Elies Lou Feb 12 '18 at 10:14
  • Dummy questions: 1. Did you check that the blob contains good image (let say by use this blob in as described here: https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/toBlob)? 2. Did you send blob to server via POST? (Yes, I'm understand that is really silly question) – Vasyl Moskalov Feb 12 '18 at 10:20
  • 1
    Please provide an [mcve] so we can check what is going wrong with your code. All browsers are able to export a canvas image far more bigger than 1920*1080 to a dataURI or a Blob. By experience of such questions, I would say that you are dealing with some asynchronous race condition somewhere, like e.g you might be calling toBlob before you did draw on your canvas if you are drawing an img element. – Kaiido Feb 12 '18 at 11:29
  • @VasylMoskalov actually, the blob do not contain a valid image ( there is the whole problem ) and yes of course :') It appears that the issue is only for my computer... with all the chrome versions installed and uptodate (arch 4.15.2-2)... – Elies Lou Feb 14 '18 at 12:36
  • @Kaiido The exemple I use is this one [React Cropper Demo](http://roadmanfong.github.io/react-cropper/example/) If I go to this page and click crop, the crop area (bottom left) stays empty Please tell me if you have the same results, If so, I can close the issue Thanks for taking the time ! – Elies Lou Feb 14 '18 at 12:37
  • @EliesLou Just a simple question. Are you tried to convert to Blob something like rendered via ctx.drawImage()? – Vasyl Moskalov Feb 14 '18 at 12:44

1 Answers1

0

I had the same problem with chrome. After disabling scriptsafe and µBlock plugin everything worked like a charm

mheimschild
  • 1