css3 html5 拍照

CSS3和HTML5已经成为了最流行的网页开发技术，它们不仅提供了许多新的功能和特性，还允许我们通过浏览器直接调用设备功能，如拍照。

if(navigator.mediaDevices &
    &
 navigator.mediaDevices.getUserMedia){
  navigator.mediaDevices.getUserMedia({
 video: true, audio: false }
)    .then(function(stream){
      // 成功获取视频流    }
)    .catch(function(err){
      // 捕获错误    }
    );
}
    

以上代码可以获取用户摄像头拍摄的实时视频流，并可以在网页中展示。通过JavaScript的Canvas API，我们还可以将视频流转换成图像，并添加滤镜效果和水印。

var video = document.querySelector('video');
    // 创建Canvas对象，设置尺寸和过滤器var canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    var context = canvas.getContext('2d');
    context.filter = 'grayscale(1)';
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 在图像上添加水印context.font = "30px Arial";
    context.fillStyle = "red";
    context.textAlign = "center";
    context.fillText("My Photo", canvas.width/2, canvas.height/2);
    // 将Canvas转换为图片var img = new Image();
    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);
    

通过以上代码，我们可以在网页上直接实现拍照并添加滤镜加水印的功能，实现了更加丰富的用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！