Tải hình ảnh được tạo JavaScript lên Django

Question

Tôi có một hình ảnh được tạo ở phía máy khách mà tôi muốn chuyển đến máy chủ thông qua biểu mẫu. Ví dụ: giả sử tôi có biểu mẫu đăng ký trong đó hình ảnh hồ sơ được tạo tự động bằng JavaScript và tôi muốn chuyển hình ảnh đó sang django.

Cách tốt nhất để chuyển dữ liệu nhị phân hình ảnh sang máy chủ khi người dùng nhấn nút gửi là gì? Tôi nên sử dụng trường biểu mẫu nào?

cảm ơn!

Answer 1

Tìm thấy một câu trả lời bản thân mình, đây là giải pháp trong trường hợp ai đó cần nó:

Ở phía khách hàng, đây là cách bạn có được hình ảnh từ vải và đặt nó vào một trường mẫu (một lĩnh vực char ẩn):

var dataURL = document.getElementById('canvas_id').toDataURL("image/png"); 
document.getElementById('id_hidden_image_field').value = dataURL; 

Và ở bên django:

1. thêm vào dưới dạng một lĩnh vực ẩn có tên 'hidden_image_field', mà sẽ được sử dụng để truyền dữ liệu. lĩnh vực này là một CharField đơn giản. bạn có thể thêm giới hạn max_length để đảm bảo hình ảnh ở kích thước hợp lý (lưu ý: không phải kích thước nhưng kích thước thực).

2. để phân tích dữ liệu hình ảnh:

   import re 
   import base64 
   dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$') 
   ImageData = request.POST.get('hidden_image_field') 
   ImageData = dataUrlPattern.match(ImageData).group(2) 
   
   # If none or len 0, means illegal image data 
   if (ImageData == None or len(ImageData) == 0: 
       # PRINT ERROR MESSAGE HERE 
       pass 
   
   # Decode the 64 bit string into 32 bit 
   ImageData = base64.b64decode(ImageData) 
   

và bây giờ imageData chứa dữ liệu nhị phân, bạn chỉ có thể lưu vào một tập tin và nó sẽ làm việc.

hy vọng điều này sẽ hữu ích.