python - 将 Canvas 图像中的图像保存到 Django 文件夹中

Question

我想将图像保存在 Canvas 窗口中。

var Pic = document.getElementById("myCanvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "");

在views.py中，我能够在Base64解码后获取图像数据

@csrf_exempt
def add(request):
    if request.method == "POST":
        payload = json.loads(request.body)
        image_data = base64.b64decode(payload['imageData'])
        f = open('Pic.png', 'w')
        f.write(str(image_data))
        f.close()
        return HttpResponse(request)
    else:
        return HttpResponse('no data')

完成 Base64 解码后，我得到了这个。图像查看器无法识别它。

b'\x89PNG\r\n\x1a\n\x00\x00\x00\rIHDR\x00\x00\x03 \x00\x00\x02X\x08\x06\x00\x00\x00\x9av\x82p\x00\x00 \x00IDATx^\x8c\xbdks$Yr\x1dx#2\x12@U\xf5kD\x0e\xf7W\xe9\xc3\x9a\x96\x1c\xa3v?\xe9\xc1\x99\xa6(\xfd\xe5\xb5\xb55\xe9\x039\xd3\xd3\xdd\xd5\xf5\x002#Rv^\xee7QM\x8d0\x04Q\rdFF\xdc\x87\xbb\x9f\xe3\xc7\xfd.\xff\xf6\x1f\xff\xe3\xed\xb4\xae\xe3\xb4\x8c\xb1\x0e}\xed\xeb\x18\xb7\xdbm\x1c\xf8\xf7m\x8c\xeb\xbe\x8f\x1d\xff\xb5,\xe34Nc[\xf5\xfdv_\xc68nc\xd9oc=n|\xef\xe9\x86w\x8d\xb1\x8c\xdb8\xad\xcbX\x96e\xec\xeb\xc1\x9f\xd7\xe54\xf6u\xe1\xb5\xc7m\xd5\xcf\xb1\xe8\xd5\xb7\xdb\xb8\x8e\xdb8n7\xfe\x1b\xaf_\x17\xfcM_+\xeeo\xc1-,\xe3\xb6_\xc7\xe5r\x19\x97\xe3\x18\xc7\xba\x8e\x85\xf7\xff\xc8\xeb,\xb8\x1f^\xf76N\xe3\xca\xd7\x9fV\xfc\xe5\xe0u\xf1\xbd\xae\xeb\xb8\xe17\xb8\x8d\xdbm\xec\xb7u\x9cN\'\xdeo}\xc6\xe1{\xd9\xf7\xb1\xf2=\xf8\xdb\xce{\xb9q4p\xbd1\xf6\xd3i,\xcb:\x8e\xdb2\x8ec\x8c}\xc7\xb3\xe2w\xf8\xd6\xfd\xf33\xc61N\xebi\x9c\x97\x85\xdfx6\\\xefv\xc3u\xae\xe3\xb8]\xc7\xbe\xdf\xc6\xed8\xe99n+\xbf\xf1\xb5\xadc\xacx\x881\xc6q\xdc8\x1f/\xb8\x17\x8c\xc5\xb2\xf0\xf95V\xeb\xd8\xf7}\x1c\xb8\x11\\\x85c\xaf\x9f\x07_\xab\xe7\xe7\'\xac\xcb8c\x8c<&c\xd7Xq\x11x\xfe\xf7\xab\xc6\xec\xc0\\\r=\xcf\xb1\xeay\xf1yy>|\xf2\xb1\xef\xe3\x86\xb1\xf7\xf3\xe6\xf3\x97\xa1g\xc5k\x97C?o\x03\xd7[\xf9\x1e\xfc\x8fs}\xba\x8d\xd3i\x8c\xd3i\x1d\xa7\xe3Z\xd7\xd1\xf3^\xc7\x0bW\xc7m\x1c\xcb\x18\xb7\xd3\xca9\\\x8eM\xf3{[\xc66N\x9c\xa3q\xdb4N|u\x7fi\\\xf0YC\xf3\xbf\x9cj=\xf0\xf3\xd7u\x1c\'\xad\xc3\x1d\xeb\xeb\xfa2\xf6\xcb\x85\x9f}\\\xaf\xe3\xc3\xfb\x97\xf1\xfe\xc7\xcf\xe3\xf9\xf9e|\xfb\xf5\xd7\xe3\xed\xdb\xb7\xe3q\x1b\xe3\xbc\xeec\xdb\xd6\xf1n[\xc6\xd3\xe3\xc3\x18\x0f\xd8?\xfb\xd8o\xb7q\xb9\x9d\xb8\x9e\xd7c\x1d\xa7\x9b\xc6\xec\xe1\xd0\xcf\x15s\xec\xdb\xbbn\x0b\xc7\xee\xe5\xb6\x8f\x0bw\xdd\x18\xc7\x92\xdd\x88\xf9[=~W\xcd\xeb\xed\x18\xcb\rk\x87\x0b\x90c6VN4\xd7\xef6\xf61n\xc78\xdd\x06fM\xeb`l\\\x17\x17\xacQN2\xd6\x86\xd6\xda\xe0g\xf9\xd9\xa7Q\xeb\xcf\xd5=\xf1z\xde\x83\x1b\xe6\x82s\x8e=\xa1\x91\xbe\x9e\xae^/\xd8Xz\xb8\x9b\xf7>\xd7\x9e\x1f\xe9\xc0\xfc\xdb\x06`\xb1qM\x1e\xfa\xe3z\xc3\xd8\xe8\xdf\xb7\xb1i\x8eh"\xbc\x97\x16\xafI\xcf0>\xe6\xba\xee\x1cg\xdc\xe5\x8d{a\x1d\x9bn\x99v\x08c\xc2kc\r\xe1sm\xab\xf0\xd7ml\xdc?\\\xcb\xb1\x07\xc3c\xeb=\x94U\xc45\x8c\x97\xf9u\xbc/\xde\'\x17\x95\xd6\xb9\xff\x869Z\x07l\x01\xe6R{\xf2\x82\xd5\xbe\xe6\xfe\xf5\x99\xa7\xb1\x8e3\xf6\xd3\xba\x8c\xed\xaa\xe7\xc55\xf0>\xed/\xdd3\xff\x87?p\x8c\xd6\xb1\xc3\xf6\xd1\x80\xe9)\xb7\xe5\xacur\xc3\xba\xd2\x8d\xc1V\xcb\xae\x1ec\xf7\xde\x87=\xd0=\xe3Cbgu]\x8e\xe0\x92\xf5\x97\xa7\xee\x9f\'\xec\xdd\x036\x8a\xbb\xda\xef\xb1]\x82E\xa4-;\xb8\x8fp/\xb2Oz\x0e\xec\xfd\x1b\xec\xd2\x81\x9d\xaf5\xb9\xdddSp\x85\xac\xd3\x15k\x8a\x03\xdc\xf6~9\xb4F\xf8\xcc~\xde}\xc1>\xcf\x0e\xb2}\xf1\xa4_\x07\xf6\xd1\xd5c~\x8c\xfd\xc0\xf8\xc3\xf6\xe9\xf5+\xec,\xc6\x99\x0f\x8d\xe7\x81}\x97\xdd\xe0\xfd{o\xad\x87\xee\x85\xcfl;y\xb5M\x8c\x8f\xa2-\xdc6\xda\xf6\xd3v\x1a\xdb\xf9\xa4u\xe0}\x8c\xf7b\xeee{\xf4\x19\x18\x14\xbe\xef\x04\x9b\xa39\xe0\x8c`\xfc\x8ec\xdc\xae\x17\xd9\xf0\xfd2\x96\xfd\xc2\xb5}\xcd\xbd\xf8\xf91>\xe7\xe3il\xeb\xc6\xef\xf3i\xe3\xe7\xdeNY_\xd8\x13\x07\xfd\xd1e\x835\xc4:\xec5\xd4\xbeI\xeb\x19{\xf9\xca\xcf\xe7+\x07L\x03\xd6\xe4\t\xff\xe6\x1ca\xde\xf4\xda\x9d\xf3\x06\x1b\n\

Answer 1

在 Canvas 中，图像将以 64 为基数，因此您可以尝试下面的代码来保存图像。

if request.method == 'POST': # and request.FILES['image']:
   image_data = request.POST.get('image')
   format, imgstr = image_data.split(';base64,')
   ext = format.split('/')[-1]
   data = ContentFile(base64.b64decode(imgstr))
   myfile = "profile-"+time.strftime("%Y%m%d-%H%M%S")+"." + ext
   fs = FileSystemStorage()
   filename = fs.save(myfile, data)