1

I am trying to save an html canvas content to Google Storage. What I do is as following :

  1. Create a signed url for the image file.
class ThumbnailUploadSignedURL(APIView):
@method_decorator(login_required(login_url='/login/'))
    def post(self, request):
        filename = request.POST.get('filename')
        filetype = request.POST.get('type')
        filesize = request.POST.get('size', 0)
        path =  '{0}-{1}/{2}/'.format(request.user, request.user.id, thumbnail.name)
        blob = default_storage.open(full_path, 'wb')
        signed_url = blob.blob.generate_signed_url(expiration=default_storage.expiration, method='PUT', content_type='image/png')
        return Response({"thumbnail_signed_url":signed_url})
  1. Get the content of canvas and send it to Google Storage.
var image = canvas.toDataURL("image/png");
const xhr = new XMLHttpRequest();
xhr.open("PUT", data.thumbnail_signed_url, true);
xhr.setRequestHeader('Content-Type', 'image/png');
xhr.send(image);

The file is successfully being created on Google Storage, however the content is stated as corrupt, it is indeed basically base64.

I also tried ways to convert base64 to png, yet unsuccesfully, as it was suggested here php-js-canvas example.

How can I achieve this with js and google storage ?

london_utku
  • 1,070
  • 2
  • 16
  • 36
  • 1
    Hi, are you using the [HTML5 Canvas drawing](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)? Have you configured CORS when uploading files to Cloud Storage? Check out the following [documentation](https://developers.google.com/assistant/interactivecanvas/build/web-app#cors) – sllopis Apr 22 '20 at 12:07
  • Thanks for the info. I have already been successfully uploading a lot of other content from the same application to Google Storage including videos . That is correct I am using Canvas drawing. By the way, the file is being created in Google Storage, but always the same size, and in base64, not as a PNG. – london_utku Apr 22 '20 at 12:11
  • 1
    Have yout tried using `.toBlob()`? Check out the following [documentation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob). Why is it corrupted? Do you get any error messages that you can share with us? I believe that using `.toDataURL()` the canvas will be base64 encoded as a humongous string, as per [documentation](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL). – sllopis Apr 22 '20 at 12:50
  • That is correct when I use the .toDataURL(), the canvas will be base64, it is not actually corrupt but unusable. I don't have any mechanism in Google Storage part, when the base64 file is uploaded, it is still base64, I cannot translate it to png. That is where I am stuck. – london_utku Apr 22 '20 at 12:56
  • 1
    Check out the following [canvas2image](https://github.com/hongru/canvas2image) library that shows you how to convert canvas to images. Also, this [Stackoverflow post](https://stackoverflow.com/questions/4773966/drawing-an-image-from-a-data-url-to-a-canvas) mentions how you can draw a base64-encoded image onto a canvas, in case you need it. – sllopis Apr 23 '20 at 15:02
  • Thanks @sllopis, if you write this as a answer below, I can accept this as the answer. – london_utku Apr 23 '20 at 15:07
  • 1
    @SuperEye, How did you solve this, I have base65 using canvas.toDataURL("image/png"); and it is a valid base 64 i checked with online, I have a common method to upload base64 to gs, but here base64 after loaded there is a small squre image. the common method is correct its being used many place to upload image like file uploader – Md. Parvez Alam Jul 07 '21 at 10:57
  • It's complicated, I will try to provide detailed instructions soon. – london_utku Jul 07 '21 at 22:16

1 Answers1

1

Check out the following canvas2image library that shows you how to convert canvas to images.

Also, his Stackoverflow post mentions how you can draw a base64-encoded image onto a canvas using the drawImage() method, in case you need it.

sllopis
  • 2,292
  • 1
  • 8
  • 13