3

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

Doug
  • 1,435
  • 1
  • 12
  • 26
  • You could easily use `ctx.drawImage(video, 0, 0, 300, 300 / 16 * 9)` (assuming your video is 16/9) into a `300x(300/16*9)` canvas. (The numbers can be changed depending on what you mean with resolution). The video is _not_ dependent on your video element size. – somethinghere Apr 22 '16 at 15:34
  • What do you mean with resolution is actually what I meant/ What size of output do you need for any video? – somethinghere Apr 22 '16 at 15:40
  • I danced around the term resolution because really I didn't have a better word at my disposal -- DPI and PPI always devolve into conversations about which is proper to discuss with web, if any. So, the API, that I've been required to use, the first thing it does is check the meta data for the image if the resolution there is greater than or equal to 300. I basically have been tasked to capture a still from the camera and then the resulting image could be saved and opened in PhotoShop with 300+ listed in the image's resolution. – Doug Apr 22 '16 at 16:35
  • I think _resolution_ in the modern world is simply _the size of the video_. The answer below is pretty good. Scaling a video will result in quality loss anyhow, and you could scale in photoshop anyhow. Take a screenshot at the maximum resolution, nothing more, otherwise you are shifting data back and forth that has no actual use... – somethinghere Apr 22 '16 at 16:43

1 Answers1

12

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.

Community
  • 1
  • 1
  • Thanks for the detailed response. I don't like that there is a req that an image's DPI has to be 300+ when that has little to no bearing on the clarity/size of the image. Plus as you stated, it shouldn't matter :) – Doug Apr 22 '16 at 19:05