CODEWITHSUNDEEP
javascriptvue.js
Christian Mahardhika
Christian Mahardhika

Reputation: 93

How to save Image from ctx.drawImage() to local storage

Hi I want to store my Image which I capture from webcam. My plan is save the picture to local storage then post it to backend after all form fields are filled in.

here is my methods (I m using Vue Js) to take the picture from webcam 

 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)
        }

Upvotes: 1

Views: 686

Answers (1)

bhoodream
bhoodream

Reputation: 456

I sketched some code to get image data from the canvas. You just have to save the data to the localStorage and send it to the server.

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>

Upvotes: 1

Related Questions