Python3将html画布中的png数据写入文件

Question

我以前有一些代码是使用python 2.7编写并使用的，我想移植到python 3.6，该代码旨在使用Django从HTML画布读取的png-data。

通过json传递过来的数据看起来像这样

{"png-data":"data:image/png;base64,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 PbMvDkz37/6N3 bmRdm5gNWBAgQeFoFjImntVmf17kEvjUzP5 Z7y1e8O2ZeXlx3lECBAhECxgT0fUI98gCx5B4b2a tszx75n5yvI1HCdAgECsgDERW41gAQIfzszzZ8rhWTsTpJchQCBPwBtcXicSZQj8amZePWMUz9oZMb0UAQJZAt7gsvqQ5vEFjt/aePeMX5G4/ow8a4/frQQECFxIwBvchWC9bK3A8Yclf3CB9J61C6B6SQIEMgS8wWX0IEWOwL9m5su3xPnrzLw4M /PzPHs/Ofqn M/H78l8ss7/qClZy2nY0kIEDizgDe4M4N6uWqB43n46JbP4Ncz8 Mb/t3x/SR MzNfv cz96xVXw3hCRC4S8AbnPtB4GOBu8bEbc/KP2fm2QcgetYegORDCBDoFPAG19mb1JcROHVMnPI3Pjxrl nMqxIgECDgDS6gBBFiBE4ZE  c F0xPWsxNQtCgMC5BbzBnVvU6zULfGlmju9WedOv62fl DMSb83MN078RD1rJ4L5cAIEegS8wfV0JenlBe76ysTxA7zemJmfPWEMz9oTwjlGgEC gDe4/I4k/PwE7hoT2xSeta2g8wQIxAp4g4utRrBHELjrtzkeEuf4PhS3/SwPz9pDBH0MAQKVAt7gKmsT kICm69M/HlmXpuZv9ySzbN2odK8LAECjy/gDe7xO5AgR BJvjJxfMfMV2bmt1ffOfP47zf98qzl9CwJAQJnFvAGd2ZQL1ct8CRfmfjR1d/uOD7xh/xtkGog4QkQIOD/LbkDBO4XOH5i6Av3f9j/fcTfZ YnM/PHq5/V4Vk7EdCHEyDQLeArE939SX9 geOvgL43M1898aWPQfHcHT/bw7N2IqgPJ0CgR8AbXE9Xkn5 Aseg MXMfPcT/5PHz C4b2Acv81x0w8KO3666PHv/CJAgMBTKWBMPJW1 qTOJHD9fBxj4KWZ d09r3t8/O9n5vgumZ/8dZz74ZkyeRkCBAjECRgTcZUIFCzwp5n5zi35jt/m ObMHF/VePNqfBwfegyJ12fm/eDPSzQCBAisBIyJFZ/DXzCBTw F60//HzPz05n5wxfMw6dLgACB/wkYEy4CgdMFj ...

然后在后端读取

png_data = data['png-data']

开始处理...

img_str = re.search(r'base64,(.*)', png_data).group(1)

然后尝试保存它

image = open(image_name, 'wb')
image.write(img_str.decode('base64'))

这会引发错误

'str' object has no attribute 'decode'

我以为它可能会自动解码，但尝试时不进行解码'

image.write(img_str)

引发错误

a bytes-like object is required, not 'str'

Answer 1

尝试一下：

import re
import base64

OUTPUT_FILE = 'result.png'
DATA = {"png-data":"data:image/png;base64,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 PbMvDkz37/6N3 bmRdm5gNWBAgQeFoFjImntVmf17kEvjUzP5 Z7y1e8O2ZeXlx3lECBAhECxgT0fUI98gCx5B4b2a tszx75n5yvI1HCdAgECsgDERW41gAQIfzszzZ8rhWTsTpJchQCBPwBtcXicSZQj8amZePWMUz9oZMb0UAQJZAt7gsvqQ5vEFjt/aePeMX5G4/ow8a4/frQQECFxIwBvchWC9bK3A8Yclf3CB9J61C6B6SQIEMgS8wWX0IEWOwL9m5su3xPnrzLw4M /PzPHs/Ofqn M/H78l8ss7/qClZy2nY0kIEDizgDe4M4N6uWqB43n46JbP4Ncz8 Mb/t3x/SR MzNfv cz96xVXw3hCRC4S8AbnPtB4GOBu8bEbc/KP2fm2QcgetYegORDCBDoFPAG19mb1JcROHVMnPI3Pjxrl nMqxIgECDgDS6gBBFiBE4ZE  c F0xPWsxNQtCgMC5BbzBnVvU6zULfGlmju9WedOv62fl DMSb83MN078RD1rJ4L5cAIEegS8wfV0JenlBe76ysTxA7zemJmfPWEMz9oTwjlGgEC gDe4/I4k/PwE7hoT2xSeta2g8wQIxAp4g4utRrBHELjrtzkeEuf4PhS3/SwPz9pDBH0MAQKVAt7gKmsT kICm69M/HlmXpuZv9ySzbN2odK8LAECjy/gDe7xO5AgR BJvjJxfMfMV2bmt1ffOfP47zf98qzl9CwJAQJnFvAGd2ZQL1ct8CRfmfjR1d/uOD7xh/xtkGog4QkQIOD/LbkDBO4XOH5i6Av3f9j/fcTfZ YnM/PHq5/V4Vk7EdCHEyDQLeArE939SX9 geOvgL43M1898aWPQfHcHT/bw7N2IqgPJ0CgR8AbXE9Xkn5 Aseg MXMfPcT/5PHz C4b2Acv81x0w8KO3666PHv/CJAgMBTKWBMPJW1 qTOJHD9fBxj4KWZ d09r3t8/O9n5vgumZ/8dZz74ZkyeRkCBAjECRgTcZUIFCzwp5n5zi35jt/m ObMHF/VePNqfBwfegyJ12fm/eDPSzQCBAisBIyJFZ/DXzCBTw F60//HzPz05n5wxfMw6dLgACB/wkYEy4CgdMFj ..."}

img_str = re.search(r'base64,(.*)', DATA['png-data']).group(1)
img_data = base64.b64decode(img_str)

with open(OUTPUT_FILE, 'wb') as f:
    f.write(img_data)