CODEWITHSUNDEEP
javascriptvideocanvasresolution
Doug
Doug

Reputation: 1515

Video -> Canvas -> Image ... at a specific resolution?

I'm working with an API that needs for me to capture jpeg image at a resolution of 300.

The workflow is:

  1. Use the video element to stream from the integrated camera.
  2. "Snap" a photo of the video and draw it onto the canvas element.
  3. Use .toDataURL() to bring the image over from the canvas to an image tag.
  4. Send that image to the API for validation...

The problem I'm running into is that I believe the image drawn on canvas is dependent to the resolution of the webpage/monitor it's on. While I can change the dimensions of the images, use CSS to scale down something that's twice as large to look higher res; the API keeps barking back that I'm sending them an image that is too low of quality.

I ultimately need to utilize the integrated camera to capture and transmit a jpeg with a resolution of 300 (or greater) but I can't figure out if this is possible with front-end code alone.

Thanks for the help :)

Upvotes: 3

Views: 5502

Answers (1)

user1693593
user1693593

Reputation:

Although not shown, you are probably using the video element's width and height properties to define the size of the canvas element.

What you need to use is the videoWidth and videoHeight properties instead as the former reflects the element size, not the original video size.

If that is still too small (caused by the video itself) you always scale up the element using the aspect-ratio of the video:

var aspect = video.videoHeight / video.videoWidth;
var wantedWidth = 1280;   // or use height
var height = Math.round(wantedWidth * aspect);

Now you can draw the video to canvas:

canvas.width = wantedWidth;
canvas.height = height;

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

Update if you by "300" refer to DPI then take a look at this answer. It's important to be aware of that pixels is the only valid and usable unit for images, video and screens (versus inches, centimeters etc.). DPI is used in purely arbitrary form to establish a relationship between a physical medium like paper and pixel based sources, but doesn't change the actual pixel resolution. F.ex. a video in HD 1920x1080 will be 1920x1080 at 10 DPI as well as at 1000 DPI.. DPI doesn't matter.

Upvotes: 12

Related Questions