Question

嗨，我想存储从网络摄像头捕获的图像。我的计划是将图片保存到本地存储，然后在填写所有表单字段后将其发布到后端。

这是我从网络摄像头拍摄照片的方法（我正在使用Vue Js）

 takePictureSelf() {
            let ratio = (window.innerHeight < window.innerWidth) ? 16 / 9 : 9 / 16;
            const picture = document.querySelector("canvas");
            picture.width = (window.innerWidth < 1280) ? window.innerWidth : 1280;
            picture.width = window.innerWidth / ratio;
            const ctx = picture.getContext("2d");
            ctx.imageSmoothingEnabled =  true ;
            ctx.imageSmoothingQuality = "high";
            const gambar = document.querySelector("video");
            ctx.drawImage(gambar,0,0,picture.width, picture.height)
        }

Answer 1

我草绘了一些代码以从画布中获取图像数据。您只需将数据保存到localStorage并将其发送到服务器。

document.getElementById("myImg").onload = function() {
  const img = document.getElementById("myImg");
  const canvas = document.getElementById("myCanvas");
  const pre = document.getElementById('myPre');
  const ctx = canvas.getContext("2d");

  canvas.width = img.width;
  canvas.height = img.height;
  
  ctx.drawImage(img, 0, 0);

  const imageFileData = canvas.toDataURL('image/jpeg', 1);
  
  // for demo
  pre.innerHTML = imageFileData;
};

canvas {
  display: none;
}

pre {
  white-space: pre-wrap;
  word-break: break-all;
}

<img id="myImg" crossorigin="anonymous" src="https://loremflickr.com/50/50" />
<canvas id="myCanvas"></canvas>
<pre id="myPre">image loading...</pre>

如何将图像从ctx.drawImage（）保存到本地存储

1 个答案: