How to change size in imageCapture.takePhoto()?

问题

I need to change the size of a photo from imageCapture.takePhoto() but it is not working.I need to change the size to 320 height X 240 width but the result is 640 height X 480 width.

Here you can found the documentation.https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture/takePhoto

navigator.getUserMedia(
{
 video:true,
 audio:true
},
function(localMediaStream) {
 const track = localMediaStream.getVideoTracks()[0];
 let imageCapture = new ImageCapture(track);
 imageCapture.takePhoto(
   {imageHeight:320,imageWidth:240}).then(function(blob) {
    //do somethingh with blob (photo)
 }).catch(function(error) {
  console.log(error);
 });
},
function(err) {
  console.log(err);
});

回答1:

It seems you need to check the PhotoCapabilities of your ImageCapture before being able to use the photoSettings parameter of ImageCapture.takePhoto(photoSettings).

To do so, you will call the getPhotoCapabilities() method of your ImageCapture, and then check the ranges set as imageHeight and imageWidth.

const capture = new ImageCapture(track);
const { imageWidth, imageHeight } = await capture.getPhotoCapabilities();
const width = setInRange(required_width, imageWidth);
const height = setInRange(required_height, imageHeight);
const photoSettings = (width && height) ? {
  imageWidth: width,
  imageHeight: height
} : null;
const pic = await capture.takePhoto(photoSettings);

function setInRange(value, range) {
  if(!range) return NaN;
  let x = Math.min(range.max, Math.max(range.min, value));
  x = Math.round(x / range.step) * range.step; // take `step` into account
  return x;
}

https://jsfiddle.net/bLrvyet5/

But it may very well happen that your required width and height are not in these MediaSettingsRange, and thus you may have to resize this image yourself on a canvas.

来源：https://stackoverflow.com/questions/54226802/how-to-change-size-in-imagecapture-takephoto

标签

javascript

getusermedia

navigator