functools.partial object has not attribute 'type' が出ます。

Question

Djangoのviews.py で画像をPOSTメソッドで受け取った後、urlopenするときにエラーが出ます。
色々調べたのですが、何をしたらいいのかがわかりませんでした。
python のバージョンは、 3.9.12 です。
OS は　m1 macです。よろしくお願いします。

def image_upload(request):
    context = dict()
    if request.method == 'POST':
        username = request.POST.get("username")
        image_path = request.POST["src"]  # src is the name of input attribute in your html file, this src value is set in javascript code
        image = NamedTemporaryFile()
        image.write(urlopen(path).read())
        image.flush()
        image = File(image)
        name = str(image.name).split('\\')[-1]
        name += '.jpg'  # store image in jpeg format
        image.name = name


        if image is not None:
            obj = Image.objects.create(username=username, image=image)  # create a object of Image type defined in your model
            obj.save()
            context["path"] = obj.image.url  #url to image stored in my server/local device
            context["username"] = obj.username
        else :
            return redirect('/')
        return redirect('any_url')
    return render(request, 'index.html', context=context)  # context is like respose data we are sending back to user, that will be rendered with specified 'html file'.     

＃追記
現在出ているエラーは、'NoneType' object has no attribute 'timeoutです。

def image_upload(request):
    context = dict()
    if request.method == 'POST':

        username = request.POST.get("username")
        webimg = urlopen(request.POST.get("webimg"))
        data = webimg.read()
        image = ContentFile( data, "webcam.jpg" )
        
        # image_path = request.POST.get("webimg")  # src is the name of input attribute in your html file, this src value is set in javascript code
        # image = NamedTemporaryFile()
        # image.write(urlopen(image_path).read())
        # image.flush()
        # image = File(image)
        # name = str(image.name).split('\\')[-1]
        # name += '.jpg'  # store image in jpeg format
        # image.name = name

        if image is not None:
            obj = Image.objects.create(username=username, image=image)  # create a object of Image type defined in your model
            obj.save()
            context["path"] = obj.image.url  #url to image stored in my server/local device
            context["username"] = obj.username
        else :
            return redirect('/')
        return redirect('any_url')
    return render(request, 'index.html', context=context)  # context is like respose data we are sending back to user, that will be rendered with specified 'html file'.     

#追記のjavascriptファイル
set attribute 'src'をしないと、写真を撮った後に、撮影されたフレームが画面に表示されないので、２つset attribute しています。

(function() {
    // The width and height of the captured photo. We will set the
    // width to the value defined here, but the height will be
    // calculated based on the aspect ratio of the input stream.
  
    var width = 320;    // We will scale the photo width to this
    var height = 0;     // This will be computed based on the input stream
  
    // |streaming| indicates whether or not we're currently streaming
    // video from the camera. Obviously, we start at false.
  
    var streaming = false;
  
    // The various HTML elements we need to configure or control. These
    // will be set by the startup() function.
  
    var video = null;
    var canvas = null;
    var photo = null;
    var startbutton = null;
    var webimg=null;
  
    function startup() {
      video = document.getElementById('video');
      canvas = document.getElementById('canvas');
      photo = document.getElementById('photo');
      webimg= document.getElementById('webimg')
      startbutton = document.getElementById('startbutton');
  
      navigator.mediaDevices.getUserMedia({video: true, audio: false})
      .then(function(stream) {
        video.srcObject = stream;
        video.play();
      })
      .catch(function(err) {
        console.log("An error occurred: " + err);
      });
  
      video.addEventListener('canplay', function(ev){
        if (!streaming) {
          height = video.videoHeight / (video.videoWidth/width);
        
          // Firefox currently has a bug where the height can't be read from
          // the video, so we will make assumptions if this happens.
        
          if (isNaN(height)) {
            height = width / (4/3);
          }
        
          video.setAttribute('width', width);
          video.setAttribute('height', height);
          canvas.setAttribute('width', width);
          canvas.setAttribute('height', height);
          streaming = true;
        }
      }, false);
  
      startbutton.addEventListener('click', function(ev){
        takepicture();
        ev.preventDefault();
      }, false);
      
      clearphoto();
    }
  
    // Fill the photo with an indication that none has been
    // captured.
  
    function clearphoto() {
      var context = canvas.getContext('2d');
      context.fillStyle = "#AAA";
      context.fillRect(0, 0, canvas.width, canvas.height);
  
      var data = canvas.toDataURL('image/png');
      console.log(data);
      photo.setAttribute('src', data);
    }
    
    // Capture a photo by fetching the current contents of the video
    // and drawing it into a canvas, then converting that to a PNG
    // format data URL. By drawing it on an offscreen canvas and then
    // drawing that to the screen, we can change its size and/or apply
    // other changes before drawing it.
  
    function takepicture() {
    //   var context = canvas.getContext('2d');
    var context = canvas.getContext('2d');
      if (width && height) {
        canvas.width = width;
        canvas.height = height;
        context.drawImage(video, 0, 0, width, height);
      
        var data = canvas.toDataURL('image/png');
        photo.setAttribute('src', data);
        webimg.setAttribute('webimg',data);
      } else {
        clearphoto();
      }
    }
  
    // Set up our event listener to run the startup process
    // once loading is complete.
    window.addEventListener('load', startup, false);
  })();

#追記のhtml ファイル
ここの input id ='webimg'のところがわかってないです。

<form method="POST" name="inputForm" text="" enctype='multipart/form-data'>
                    {% csrf_token %}
                    <div id="camera" class="camera">
                        <video id="video">Video stream not available.</video>
                        <button id="startbutton" type="button">Take photo</button>
                        <input id="webimg" value="" name="src" type="text" style="display: none;">
                        <canvas id="canvas">
                        </canvas>
                    </div>
                    <br>
                    <div>
                        <img id="photo" alt="your image">
                    </div>
                    <br>
                    <button type="submit" class="button" id="submit">Submit</button>
                </form>

#スタックオーバーフローでコメントされていた解決策。具体例がなく試行錯誤したのですが、解決できませんでした。

Comments

[melian]

image.write(urlopen(path).read())

ですが、これは、

mage.write(urlopen(image_path).read())

ではないでしょうか。

[alizona]

ありがとうございます。
エラーは変わったのですが、このエラーも別のコードで試してた時に出てたエラーで、
今回の方に戻ってきてたのですが、質問続けても大丈夫ですか？

[melian]

質問を続けてもよいかと思います。

> 現在出ているエラーは、'NoneType' object has no attribute 'timeoutです。

requests モジュールのソースコードを確認したのですが、NoneType ということは画像の取得に失敗しています。おそらく、image_path の中身が PATH_INFO の部分だけなのではないかと推測します。

[alizona]

ありがとうございます。
こちらのサイトで、全てのコードが解説されているのですが、このサイトで行なっているのは、画像をキャプチャして、画面に表示するまでです。
https://developer.mozilla.org/ja/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos#%E3%83%87%E3%83%A2
それで、Djangoにpostするには？　という質問がしたのリンクで行われていて、そこでも画面に表示するとこで止まっていました。（ただ、html に input id='webimg'というものが追加されています。）
２０２２年のコメントで、このコードを使うためには、変更が必要です。
webimgにdataをセットして、views.py でwebimgを取得しましょう！。と書いてあったので、
そこをずっと試行錯誤してるのですが、
webimgにdataをセットする方法として、
global 変数に webimgを作成、
var webimg=null;
webimg= document.getElementById('webimg')

var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
webimg.setAttribute('webimg',data);
にて、webimgに値をセット。

views.py にて、
上記のコード通り、　Post.get('webimg') しています。
エラーは同じです。
質問の追記部分の javascript のコードに全文を記述しました。
何度も申し訳ありませんが可能でしたら一読していただけるとありがたいです。

[alizona]

したのリンクです。
https://stackoverflow.com/questions/62049649/capture-web-camera-image-and-upload-database-using-django/69367242#69367242?newreg=c17de1af308241f6be3f551c45017a4a

[alizona]

http://127.0.0.1:8000/
runserver が http なのですが、https じゃないとできないなんてことありますか？

[alizona]

htts で、$ pip install django-extensions

# RunServerPlusを使うためのライブラリ
$ pip install Werkzeug
$ pip install pyOpenSSL
をダウンロードして、その他処理をして、https で実行しようとしたのですが、
linkが開きませんでした。お門違いでしたかね。