Question

我已经使用画布创建了图像。我想将确切的图像文件附加到表单数据而不是URL中。这是我的代码。

<video></video>

<button type="button" onclick="turnOn()">turn on cam</button>
<button type="button" onclick="takeSnapshot()">capture image</button>


<script>
    function turnOn() {
         document.getElementsByTagName('video')[0].play();

         var video = document.querySelector('video')
          , canvas;

        if (navigator.mediaDevices) {
           navigator.mediaDevices.getUserMedia({video: true})
            .then(function(stream) {
              video.src = window.URL.createObjectURL(stream);
            })
            .catch(function(error) {
              document.body.textContent = 'Could not access the camera. Error: ' + error.name + " " + error.message;
            });
        }
    }

    function takeSnapshot() {
        var video = document.querySelector('video')
          , canvas;

        var img = document.querySelector('img') || document.createElement('img');
        var context;
        var width = video.offsetWidth
            , height = video.offsetHeight;

        canvas = canvas || document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;

        context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, width, height);

        img.src = canvas.toDataURL('image/png');
        document.body.appendChild(img);

        var fd = new FormData(document.forms[0]);
        fd.append("image", img);

        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/file/upload",
            data: fd,
            processData: false,
            contentType: false,
            cache: false,
            success: (data) => {
                alert("yes");
            },
            error: function(xhr, status, error) {
                  alert(xhr.responseText);
                }
        });
    }

</script>

它要附加blob文件“��...”，我希望它附加确切的图像文件。我以前没有使用过，似乎也无法理解其他教程。希望你能帮助我。非常感谢！！！

编辑：我已经编辑了代码，并尝试将我要附加的相同图像附加在正文上。但这不起作用。

Answer 1

您可以尝试将canvas.toDataURL('image/png')返回的基于64编码的嵌入式图像转换为与使用File时从<input id="file" type="file"></input>元素获得的document.getElementById("file").files[0]对象相同的fd对象到var fd = new FormData(document.forms[0]); fd.append("image", img); $.ajax({ type: "POST", enctype: 'multipart/form-data', url: "/api/file/upload", data: fd, processData: false, contentType: false, cache: false, success: (data) = > { alert("yes"); }, error: function(xhr, status, error) { alert(xhr.responseText); } });。

要尝试一下，请更改

fetch(img.src)
    .then(res = > res.blob())
    .then(blob = > {
        const file = new File([blob], "capture.png", {
            type: 'image/png'
        });
        var fd = new FormData();
        fd.append("image", file);
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/api/file/upload",
            data: fd,
            processData: false,
            contentType: false,
            cache: false,
            success: (data) = > {
                alert("yes");
            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    });

到

version: "3"
services:
  site:
    command: jekyll serve
    image: jekyll/jekyll:latest
    volumes:
      - $PWD:/srv/jekyll
      - $PWD/vendor/bundle:/usr/local/bundle
    ports:
      - 4000:4000
      - 35729:35729
      - 3000:3000
      -   80:4000

在formdata中追加创建的图像文件

1 个答案: