反应本机共享图像 - JavaScript

在 Web 应用程序中，我们可能需要让用户上传一些图像或者截图。通过本文中介绍的 JavaScript 就能够实现此功能，将用户的图像上传到 Web 服务器以方便处理。

navigator.mediaDevices.getUserMedia

navigator.mediaDevices.getUserMedia 是 Web 浏览器提供的 API，用于请求将视频和音频数据从本机设备(如摄像头或麦克风)传输到浏览器。

代码示例：

navigator.mediaDevices.getUserMedia({
    video: true
}).then(function(stream) {
    // 在这里处理获得的图像/视频流
}).catch(function(err) {
    console.log("getUserMedia Error: ", err);
});

将视频流转换成图像

下面的示例代码基于 canvas，用于将视频流转换成图像。

var video = document.createElement('video');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
    video.srcObject = stream;
    video.play();
    draw();
});

function draw() {
    var width = video.videoWidth;
    var height = video.videoHeight;
    canvas.width = width;
    canvas.height = height;
    context.drawImage(video, 0, 0, width, height);
    requestAnimationFrame(draw);
}

上述代码创建了一个 <video> 元素，以及一个 <canvas> 元素用来绘制视频流。 video 元素通过调用 getUserMedia 得到了视频流, 并通过 play 函数播放视频流。之后，我们可以使用 drawImage 函数将视频绘制到 <canvas> 中。

上传图像至服务器

我们可以使用 AJAX 技术将所获得的图像上传至服务器，代码示例如下:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
    // 在 canvas 中绘制视频
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    // 将图像转换成 base64 编码
    var dataUrl = canvas.toDataURL('image/jpeg');
    // 使用 AJAX POST 请求，将 base64 编码的图像上传至服务器
    $.ajax({
        type: 'POST',
        url: '/upload',
        data: { image: dataUrl },
        success: function (response) {
            console.log('Success:', response);
        },
        error: function (err) {
            console.log('Error:', err);
        }
    });
});

上述代码将视频数据绘制到了 canvas 中，并将 canvas 转换成了 base64 编码。之后，我们使用 AJAX 技术将编码后的图像上传至服务器。

结论

使用上述提到的 API，我们可以很容易地实现用户上传本机图像的功能。然而，需要注意的是，此操作会要求用户授权访问摄像头和麦克风，并且仅能在 HTTPS 网站中工作。