HTML5+Canvas调用手机拍照功能实现图片上传（下）

在HTML5的Canvas中，可以调用手机本身的摄像头进行拍照，并将拍摄的图片上传到网页中。这对于像手机拍照应用和社交媒体等需要上传图片的应用来说非常实用。下面将详细讲解实现这一功能的完整攻略，包括以下步骤：

第一步：创建HTML页面

首先，需要创建一个HTML页面来实现这一功能。在页面中，可以添加一个用于显示图片的Canvas元素，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Canvas实现拍照并上传</title>
</head>
<body>
    <input type="file" id="selectImage" accept="image/*" style="display:none"></input>
    <canvas id="canvas" width="640" height="480"></canvas>
    <button onclick="selectImage()">选择图片</button>
    <button onclick="capture()">拍照</button>
    <button onclick="upload()">上传</button>
    <script src="js/main.js"></script>
</body>
</html>

这里的HTML页面包含一个用于选择图片的文件输入元素、一个用于显示图片的Canvas元素，以及三个按钮用于选择图片、拍照和上传图片。在这个页面中，还需要引入一个JavaScript文件，用于处理和呈现图像数据。

第二步：获取用户权限

在使用摄像头之前，需要先获得用户的许可。可以使用HTML5的getUserMedia API，代码如下：

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
    navigator.getUserMedia({ video: true, audio: false },
        function(stream) {
            var video = document.querySelector('video');
            video.srcObject = stream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        },
        function(err) {
            console.log("The following error occurred: " + err.name);
        }
    );
}
else {
    console.log("getUserMedia not supported");
}

getUserMedia函数接受三个参数：约束、回调函数和错误处理函数。在这里，我们只需要使用video约束来获取用户许可。如果用户允许使用摄像头，那么将会调用回调函数并将获得的视频流作为参数传递。如果失败，则调用错误处理函数并将失败的信息作为参数传递。

第三步：拍摄照片

在获得了视频流之后，就可以使用Canvas来拍摄照片了。具体来说，可以使用Canvas的drawImage函数将视频流中的一帧数据渲染到Canvas中，并保存为图片。示例代码如下：

function capture() {
    var canvas = document.getElementById('canvas');
    var video = document.querySelector('video');
    var context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    var img = document.createElement('img');
    img.src = dataURL;
    document.body.appendChild(img);
}

在这个函数中，首先获取Canvas的上下文，并使用drawImage函数将视频流中的一帧数据渲染到Canvas中。之后，使用toDataURL函数将Canvas中的数据转换为一个Base64编码的字符串，然后将其保存为一个img元素并附加到页面上。

第四步：上传照片

最后一步是上传照片。可以使用XMLHttpRequest发出一个HTTP POST请求，并将Base64字符串作为请求体发送到服务器。示例代码如下：

function upload() {
    var canvas = document.getElementById('canvas');
    var dataURL = canvas.toDataURL();
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.open('POST', '/upload', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(encodeURIComponent(dataURL));
}

在这个函数中，首先获取Canvas中数据的Base64字符串，并创建一个XMLHttpRequest对象。在open函数中，指定请求的方法为POST，并将请求体设置为Base64编码的字符串。在setRequestHeader函数中，将Content-Type设置为application/x-www-form-urlencoded，表示请求体中的数据将需要进行解码。最后，调用send函数将请求发送到服务器。

通过以上步骤，就可以实现在HTML5的Canvas中调用手机拍照功能并上传图片的功能。

示例说明：

在示例中，我们使用Canvas将视频流渲染到页面中，这需要使用Canvas的drawImage函数，将音视频数据渲染到Canvas上。
上传照片需要使用XMLHttpRequest发出HTTP请求，将base64编码的图片数据放到请求的body中，发送给后台进行解码和保存。在请求时需要设置Content-Type和解码方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5+Canvas调用手机拍照功能实现图片上传（下） - Python技术站

HTML5+Canvas调用手机拍照功能实现图片上传（下）

第一步：创建HTML页面

第二步：获取用户权限

第三步：拍摄照片

第四步：上传照片

相关文章