关于html5中怎么调用相机拍照并且压缩图片的示例
前言
在 HTML5 中调用相机拍照并压缩图片是一个常见的需求。通过使用 HTML5 的新特性，我们可以直接在网页中调用设备的相机，并对拍摄的照片进行压缩处理。本文将提供一个使用 HTML5 的示例代码，展示如何实现这一功能。
1. 使用 getUserMedia API 获取摄像头访问权限
要在网页中调用设备的相机，首先我们需要获取摄像头的访问权限。HTML5 提供了一个名为 getUserMedia 的 API 来实现这一功能。下面是示例代码：
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
// 摄像头访问权限已被授予
})
.catch(function(error) {
// 摄像头访问权限被拒绝或不可用
});
代码解释：
1）使用 navigator.mediaDevices.getUserMedia() 函数可以请求访问设备的摄像头。参数 video: true 表示我们要访问摄像头的视频流。
2）.then() 函数是一个 Promise 的回调函数，当获取访问权限成功时被执行。
3）.catch() 函数是一个 Promise 的回调函数，当获取访问权限失败时被执行。
2. 使用 Canvas 进行图片压缩
调用设备相机拍照后，我们可以通过 Canvas 来进行图片压缩。下面是示例代码：
function compressImage(imageData, maxWidth, maxHeight, quality) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
var width = image.width;
var height = image.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
context.clearRect(0, 0, width, height);
context.drawImage(image, 0, 0, width, height);
var compressedImageData = canvas.toDataURL('image/jpeg', quality);
// 压缩后的图片数据为 compressedImageData
};
image.src = imageData;
}
代码解释：
1）首先我们创建一个用于绘图的 Canvas 对象，并获取该对象的绘图上下文 context。
2）通过创建一个 Image 对象并设置其 src 属性为调用相机拍摄的照片数据，我们可以获取照片的宽度和高度。
3）根据传入的最大宽度和高度，我们可以计算出要压缩后的图片大小。如果图片的宽度大于传入的最大宽度，则按照比例调整图片的宽度和高度，使其符合最大宽度和高度的限制。
4）通过设置 Canvas 的宽度和高度，并使用 drawImage() 函数将图片绘制到 Canvas 上，我们可以在 Canvas 中得到压缩后的图片。
5）最后，通过调用 Canvas 的 toDataURL() 函数，我们将压缩后的图片转换为 base64 格式的字符串，并可以设置压缩的质量。
3. HTML 文件上传
在压缩图片之后，我们可以将压缩后的图片数据使用 HTML 的文件上传功能上传到服务器。下面是示例代码：
function uploadImage(imageData, fileName) {
var formData = new FormData();
var file = dataURLtoBlob(imageData);
formData.append('file', file, fileName);
// 使用 AJAX 或其他方式进行文件上传
}
function dataURLtoBlob(dataURL) {
var binary = atob(dataURL.split(',')[1]);
var array = [];
for (var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], { type: 'image/jpeg' });
}
代码解释：
1）首先我们创建一个 FormData 对象，用于存储要上传的文件数据。
2）通过调用 dataURLtoBlob() 函数，我们将 base64 格式的图片数据转换为 Blob 对象，Blob 对象可以直接作为文件进行上传。
3）使用 formData.append() 函数将文件数据添加到 FormData 对象中，'file' 是上传文件的字段名。
4）通过 AJAX 或其他方式将 FormData 对象中的文件上传到服务器。
4. 完整示例代码
下面是一个完整的示例代码，展示了如何在 HTML5 中调用相机拍照并压缩图片：
HTML 文件：
<input type="file" accept="image/*" id="cameraInput" style="display: none;">
<img id="previewImage" src="" alt="Preview Image">
JavaScript 文件：
<script type="text/javascript">
var cameraInput = document.getElementById('cameraInput');
var previewImage = document.getElementById('previewImage');
// 点击按钮时触发调用相机拍照
function openCamera() {
cameraInput.click();
}
// 选择照片后触发图片压缩和预览
cameraInput.addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(event) {
var imageData = event.target.result;
// 调用图片压缩函数
compressImage(imageData, 800, 600, 0.8);
// 在预览区域显示照片
previewImage.src = imageData;
previewImage.style.display = 'block';
};
reader.readAsDataURL(file);
});
// 点击上传按钮触发图片上传
function upload() {
var fileName = 'compressed_image.jpg';
var imageData = previewImage.src;
// 调用图片上传函数
uploadImage(imageData, fileName);
}
</script>
代码解释：
1）HTML 文件中使用一个隐藏的 file input 元素来触发调用相机拍照。
2）JavaScript 中的 openCamera() 函数用于点击按钮时触发调用相机拍照，cameraInput.click() 触发了调用相机拍照的功能。
3）cameraInput 的 change 事件监听器用于在选择照片后触发压缩函数和预览照片的功能。
4）在选择了照片后，将照片的数据通过 FileReader 对象的 onload 事件读取出来，并传递给 compressImage() 函数进行压缩。
5）在压缩后的照片数据准备好后，将数据赋值给预览区域的图片元素，并设置其显示。
6）上传按钮触发 upload() 函数，调用 uploadImage() 函数进行图片上传。
总结
通过上述示例代码，我们可以实现在 HTML5 中调用相机拍照并压缩图片的功能。首先使用 getUserMedia() 函数获取摄像头访问权限，然后使用 Canvas 对象进行图片压缩，最后通过 HTML 文件上传功能将压缩后的图片数据上传到服务器。
这个示例代码提供了一个基本的框架，您可以根据自己的需求进行修改和扩展，例如添加图片编辑功能、增加上传进度等等。希望本文对您理解 HTML5 中调用相机拍照并压缩图片的过程有所帮助！