PC端 H5实现拍照并上传

要在PC端实现H5拍照并上传，可以使用HTML5的API，比如getUserMedia和canvas。以下是一个简单的示例代码：

<input type="file" accept="image/*" capture="camera" id="cameraInput">
<canvas id="canvas"></canvas>

<script>
    const cameraInput = document.getElementById('cameraInput');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    cameraInput.addEventListener('change', () => {
        const file = cameraInput.files[0];
        const img = new Image();
        img.onload = () => {
            canvas.width = img.width;
            canvas.height = img.height;
            context.drawImage(img, 0, 0, img.width, img.height);
            canvas.toBlob((blob) => {
                // 将图片文件上传到服务器
                // 可以使用XMLHttpRequest或fetch API等方法
            }, 'image/jpeg', 0.8);
        };
        img.src = URL.createObjectURL(file);
    });
</script>

这段代码首先创建了一个文件输入框，并指定了文件类型为图片，capture属性为camera表示使用摄像头拍照。当用户选择了图片文件后，代码创建一个Image对象，并将文件URL赋值给它，然后在它的onload事件中绘制图片到canvas上，并将canvas转换为Blob对象，最后可以将Blob对象上传到服务器。