My goal is to save the content of an HTML canvas to Google Storage. Here is my approach:
- Generate 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})
- Retrieve the canvas content and upload 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);
Although the file is successfully created on Google Storage, the content is reported as corrupt, likely due to being in base64 format.
I have attempted various methods to convert the base64 to PNG without success, including referencing this example of PHP-JS-canvas.
Any suggestions on how to accomplish this using JavaScript and Google Storage?