Как сохранить контент HTML Canvas в Google Storage - PullRequest
Новая
       44

Как сохранить контент HTML Canvas в Google Storage

0 голосов
/ 22 апреля 2020

Я пытаюсь сохранить содержимое html canvas в Google Storage. Я делаю следующее:

  1. Создание URL-адреса со знаком для файла изображения. 
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})
Получите содержимое canvas и отправьте его в 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);

Файл успешно создается в Google Storage, однако его содержание указано как поврежденное в действительности это base64.

Я также пытался преобразовать base64 в png, но безуспешно, как это было предложено здесь php - js -canvas пример .

Как мне добиться этого с помощью js и хранилищем Google?

1 Ответ

1 голос
/ 23 апреля 2020

Ознакомьтесь со следующей библиотекой canvas2image , в которой показано, как преобразовать холст в изображения.

Кроме того, в его посте Stackoverflow говорится о том, как можно нарисовать изображение в кодировке base64 на холсте, используя метод drawImage () , в случае необходимости.

...