Question

我正在尝试拍摄网络摄像头 - （横向格式），剪切中间位（纵向格式）并将其渲染到画布，使其填充屏幕纵向1080px到1920px（为此我缩放我把它切掉了3.8）。然后我需要翻转这个画布，以便镜像图像。我已经成功地删除了中间位，并将其呈现给画布......我只是想弄清楚如何翻转它。

修改

感谢所有在context.scale（-1,1）上指出我的人 - 我的问题是，我已经在使用scale ...我认为我的问题与保存上下文有关，但是我尝试的一切都无法奏效？

Answer 1

您不应该使用ctx.scale和ctx.translate方法进行裁剪。

相反，在加载视频时，计算裁剪位置，然后在绘图循环的调用中，应用这些计算的位置。

完成后，按照@Mahout的建议轻松应用context.scale(-1, 1);。
请注意，在应用context.translate(canvas.width, 0);之前，您还需要scale()。

我重构了你的代码，因为你请求视频强制执行的方式是out of date（就像它的chrome一样）。

我也改变了你的循环，为了只在视频加载时调用它，不需要尝试绘制任何尚未存在的内容，并且我用{{更改了setTimeout 3}}方法，大约以30fps的速度发射。

＆＃13;

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		// we don't need to append the video to the document
		video = document.createElement("video"),
		videoObj = 
		navigator.getUserMedia || navigator.mozGetUserMedia ? // our browser is up to date with specs ?
		{ 
		video: {
			width: { min: 1280,  max: 1280 },
			height: { min: 720,  max: 720 },
			require: ['width', 'height']
			}
		}:
		{
		video: {
			mandatory: {
				minWidth: 1280,
				minHeight: 720,
				maxWidth: 1280,
				maxHeight: 720
			}
		}
	},
	errBack = function(error) {
		console.log("Video capture error: ", error.code); 
	};
	// create a crop object that will be calculated on load of the video
	var crop;
	// create a variable that will enable us to stop the loop.
	var raf;
	
	navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
	// Put video listeners into place
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = URL.createObjectURL(stream);
			video.onplaying = function(){
				var croppedWidth = ( Math.min(video.videoHeight, canvas.height) / Math.max(video.videoHeight,canvas.height)) * Math.min(video.videoWidth, canvas.width),
				croppedX = ( video.videoWidth - croppedWidth) / 2;
				crop = {w:croppedWidth, h:video.videoHeight, x:croppedX, y:0};
				// call our loop only when the video is playing
				raf = requestAnimationFrame(loop);
				};
			video.onpause = function(){
				// stop the loop
				cancelAnimationFrame(raf);
				}
			video.play();
		}, errBack);

	function loop(){
	   context.drawImage(video, crop.x, crop.y, crop.w, crop.h, 0, 0, canvas.width, canvas.height);
	   raf = requestAnimationFrame(loop);
	}
// now that our video is drawn correctly, we can do...
context.translate(canvas.width, 0);
context.scale(-1,1);

}, false);

＆＃13;

body,html{margin:0}
canvas{ border:1px solid;}

＆＃13;

<canvas id="canvas" height="1920" width="1080"></canvas>

＆＃13;

requestAnimationFrame

Answer 2

如果要横向翻转，您可以使用context.scale(-1, 1);。

来自http://www.html5canvastutorials.com/advanced/html5-canvas-mirror-transform-tutorial/

修改

作为最后的手段，可以使用这个CSS

#canvas { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

如果需要，可以使用javascript动态应用。未经测试但应该有希望工作！

HTML5镜像网络摄像头画布

2 个答案: