In my app, I wrote a code which allows a user to take a picture using their camera which is connected to the puter.

Implementation:

I have used a webcam, which show a video element and the source is the camera:

function onSuccess (stream) {
 this.video.srcObject = stream;
}
navigator.getUserMedia({video: true}, onSuccess, onFailure)

When the user clicks on a button I create a snapshot from the video:

function takeSnapshot (width, height, savePicture) {
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);

      canvas.toBlob(function (blob) {
         savePicture(blob);
      }, "image/jpeg");
   }

Now, I need to zoom into the camera and crop the video around the center, since I want to remove the background around the photo. I don't want to implement this using CSS since I want to save the picture cropped and zoomed too. I want this zooming in the video view and also when taking the snapshot with zoom.

The camera has no zooming option of its own.

Is there an option to zoom and crop in the video stream?

In my app, I wrote a code which allows a user to take a picture using their camera which is connected to the puter.

Implementation:

I have used a webcam, which show a video element and the source is the camera:

function onSuccess (stream) {
 this.video.srcObject = stream;
}
navigator.getUserMedia({video: true}, onSuccess, onFailure)

When the user clicks on a button I create a snapshot from the video:

function takeSnapshot (width, height, savePicture) {
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);

      canvas.toBlob(function (blob) {
         savePicture(blob);
      }, "image/jpeg");
   }

Now, I need to zoom into the camera and crop the video around the center, since I want to remove the background around the photo. I don't want to implement this using CSS since I want to save the picture cropped and zoomed too. I want this zooming in the video view and also when taking the snapshot with zoom.

The camera has no zooming option of its own.

Is there an option to zoom and crop in the video stream?

• javascript
• html
• webrtc
• webcam

Share Improve this question Follow edited Nov 5, 2018 at 13:09 Uwe Keim 40.8k6161 gold badges190190 silver badges304304 bronze badges asked Nov 5, 2018 at 12:37 RivkaRivka 17111 silver badge66 bronze badges 1

• Due the video output is in the canvas you can do anything canvas allows you, including zoom and crop. – Mosh Feu Commented Nov 5, 2018 at 13:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

context.drawImage() has optional parameters to "scale" image (sWidth, sHeight). To move the image and "crop", you may set additional params (dx, dy).

https://developer.mozilla/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

But this a direct way of zoom&crop by JS. If you need ready UI for such functionality, you may bine your code with something like this: http://deepliquid./projects/Jcrop/demos.php?demo=thumbnail (I didn't try it, just have it in bookmarks)