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

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

以下是我从网络摄像头拍摄照片的方法（我使用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)
        }

takePictureSelf（）{
let比率=（window.innerHeight

我草拟了一些代码来从画布获取图像数据。您只需将数据保存到

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）；
//演示
pre.innerHTML=图像文件数据；
};
画布{
显示：无；
}
前{
空白：预包装；
单词break：打破一切；
}

图像加载…